DOM Nodes

In this topic we will learn how to Add and Remove Nodes (HTML Elements)


Adding New HTML Elements (Nodes)

To add a new element in the HTML content, user first need to create the element (element node), and then append it to an existing element.

Input:-
<!DOCTYPE html>
<html>
<body>

<div id="myDiv">
<p id="para1">This is first paragraph.</p>
<p id="para2">This is second paragraph.</p>
</div>

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

</body>
</html>

Output :-

Below is the explanation for above example:-

This code creates a new <p> element:

var para3 = document.createElement("p");

To add text to the <p> element, user need to create a text node first. This code creates a text node:

var node = document.createTextNode("This is new paragraph.");

Then user append the text node to the <p> element:

para3.appendChild(node);

Finally user will append the new element to an existing element.

var element = document.getElementById("myDiv");

This code appends the new element to the existing element:

element.appendChild(para3);

Creating new HTML Elements – insertBefore()

The appendChild() method used in the previous example, appended the new element as the last child of the parent.

If user don’t want that you can use the insertBefore() method to insert before:

Input:-
<!DOCTYPE html>
<html>
<body>

<div id="myDiv">
<p id="para1">This is first paragraph.</p>
<p id="para2">This is second paragraph.</p>
</div>

<script>
var para3 = document.createElement("p");
var node = document.createTextNode("This is new paragraph.");
para3.appendChild(node);
var element = document.getElementById("myDiv");
var child1 = document.getElementById("para1");
element.insertBefore(para3,child1);
</script>

</body>
</html> 

Output :-


Removing Existing HTML Elements

To remove an existing HTML element, use the remove() method:

Input:-
<!DOCTYPE html>
<html>
<body>

<div>
<p id="para1">This is first paragraph.</p>
<p id="para2">This is second paragraph.</p>
</div>


<button onclick="myFunc()">Remove paragraph1</button>

<script>
function myFunc() {
  var element = document.getElementById("para1");
  element.remove();
}
</script>

</body>
</html> 

Output (Before Click):-

Output (After Click):-

Below is the explanation for above example:-

The HTML document contains a <div> element with two child nodes (two <p> elements):

<div>
<p id="para1">This is first paragraph.</p>
<p id="para2">This is second paragraph.</p>
</div>

Find the element that you want to remove:

var element= document.getElementById("para1"); 

Then use the remove() method to remove that element:

element.remove();

Note:- The remove() method does not work in older browsers, see the example below on how to use removeChild() instead.


Removing a Child Node

For some browsers that does not support the remove() method, user have to find the parent node to remove an element:

Input:-
<!DOCTYPE html>
<html>
<body>

<div id="myDiv">
<p id="para1">This is first paragraph.</p>
<p id="para2">This is second paragraph.</p>
</div>

<script>
var parent = document.getElementById("myDiv");
var child1 = document.getElementById("para1");
parent.removeChild(child1);
</script>

</body>
</html> 

Output :-

Below is the explanation for above example:-

This HTML document contains a <div> element with two child nodes (two <p> elements):

<div id="myDiv">
	<p id="para1">This is first paragraph.</p>
	<p id="para2">This is second paragraph.</p>
</div>

Find the element with id=”myDiv”:

var parent = document.getElementById("myDiv");

Find the <p> element with id=”para1″:

var child1 = document.getElementById("para1");

Remove the child from the parent:

parent.removeChild(child1);

Here is below a common workaround: Find the child that user want to remove, and use its parentNode property to find the parent:

var child1 = document.getElementById("para1");
child1.parentNode.removeChild(child1);

Replacing HTML Elements 

To replace an element from the HTMLelement, use the replaceChild() method:

Input:-
<!DOCTYPE html>
<html>
<body>

<div id="myDiv">
<p id="para1">This is first paragraph.</p>
<p id="para2">This is second paragraph.</p>
</div>

<script>
var parent = document.getElementById("myDiv");
var child1 = document.getElementById("para1");
var para1 = document.createElement("p");
var node = document.createTextNode("This is new paragraph.");
para1.appendChild(node);
parent.replaceChild(para1,child1);
</script>

</body>
</html>

Output :-