Removing/Editing nodes

Removing nodes

Similar to adding nodes, for removing a node, we need to find out the parent node of the elemnt and then pass the childNode which we wish to remove. We will show it through an example :-

var object = document.getElementById("span3");
document.getElementById("li3").removeChild(object);
Replacing nodes in document

replaceChild(newChildNode, oldChildNode) replaces the oldChildNode node with the newChildNode node. We will start with the following HTML document and will replace this at the end.

<div id='div1'>
        <span id='span1'>This is the text of SPAN1</span>
         This text is not in a span tag.
      </div>

Now we will replace the existing span1 with a new span. Lets see how :-

 newSPAN = document.createElement("SPAN");
 newSPAN.setAttribute("id","span2");
 newSPAN.setAttribute("align","center");
 newText = document.createTextNode("This is new SPAN");
 newSPAN.appendChild(newText);
 div1 = document.getElementById("div1");
 div1.replaceChild(newSPAN,div1.firstChild);

So, at the end we end up with this HTML document :-

<div id='div1'>
            <span id='span2' align='center' >This is the text of SPAN2</span>
            This text is not in a span tag.
      </div>

Once, we are done with inserting, deleting, and appending nodes, lets see some applications of DOM :-

Member Login

Member Login




Not a Member? Sign Up!




Login to comment

Be the first to comment on this topic







  


<<< Wanna review

Continue >>>