Search code examples
javascriptdom-events

Remove and replace another onclick function in a div through pure JavaScript?

I have this below span div and I copy this to another place in the DOM. But the onclick function I need to remove and place another onclick function.

<span class="plus childNode1" onclick="expand_collapseChildnodes('childNode1')" id="abc"></span>

Here I have to remove the onclick="expand_collapseChildnodes('childNode1')" for the copied element and replace it with onclick="checkNodes('childNode1')".

Solution

  • Consider a sample HTML page:

    <html>
    <head>
    </head>
    <body>
        <div id ="d1">
        <span class="plus childNode1" onclick="expand_collapseChildnodes('childNode1')" id="abc"></span>
        </div>
        <div id ="d2">
        </div>
    </body>
</html>

    Now to move the element with id abc from DOM element with id d1 to another with id d2

    //get the element
var element = document.getElementById("abc");

//detach from source
document.getElementById("d1").removeChild(element);

//remove onclick attribute
element.removeAttribute("onclick");

//add the modified attribute
element.setAttribute("onclick", "sampleFunc()");

//attach the element to another source
document.getElementById("d2").appenChild(element);