Developer Snippet Diary

DOM EXAMPLES, create , append, prepend,remove,replace in javascript

1.CREATE AND APPEND NEW ELEMENT

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

2.CREATE AND INSERT BEFORE ELEMENT

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node); //<p>This is new.</p>
var element = document.getElementByTag("div"); <div> <p1></p1> <p2></p2> </div>
var child = document.getElementByTag("p1");
element.insertBefore(para, child);
</script>

3.REMOVE ELEMENT

<script>
var elmnt = document.getElementById("p1");
elmnt.remove();
</script>

4.REPLACE ELEMENT

<div id="div1">

  <p id="p1">This is a paragraph.</p>

  <p id="p2">This is another paragraph.</p>

</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

//EVERY THING BEHAVE AS NODE 

Posted by: R GONDAL
Email: rizikmw@gmail.com