DOM Elements

JavaScript HTML DOM element (node)

This chapter describes how to add and remove elements (nodes) from the document.

Create a new HTML element (node) - appendChild()

To create a new HTML element (node), you need to create an element first, and then add it to an existing element.

Example

<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 a new paragraph.");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);
</script>

Try It! 

Example analysis

The following code is used to create the <p> element:

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

Create a new text node for the <p> element:

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

Add the text node to the <p> element:

para.appendChild(node);

Finally, add the p element to an existing element.

Find existing elements:

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

Add to an existing element:

element.appendChild(para);

Create a new HTML element (node) - insertBefore()

In the above example, we used the appendChild() method, which is used to add new elements to the end.

If we need to add a new element to the starting position, we can use the insertBefore() method:

Example

<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 a new paragraph.");
para.appendChild(node);
 
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

 Try It! 

Remove existing elements

To remove an element, you need to know the parent element of the element.

Example

<div id="div1">
<p id="p1">This is a paragraph. </p>
<p id="p2">This is another paragraph. </p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

 Try It! 

Note: Early Internet Explorer browsers do not support the node.remove() method.

Example analysis

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

<div id="div1">
<p id="p1">This is a paragraph. </p>
<p id="p2">This is another paragraph. </p>
</div>

Find the element with id="div1":

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

Find the <p> element with id="p1":

var child = document.getElementById("p1");

Remove the child node from the parent element:

parent.removeChild(child);
lampIt would be great if an element can be deleted without referencing the parent element.
But it's a pity. The DOM needs to be clear about the element you need to delete and its parent element.

The following code is known to find the child element, and then find its parent element, and then delete this child element (delete node must know the parent node):

var child = document.getElementById("p1");
child.parentNode.removeChild(child);

Replace HTML Elements - replaceChild()

We can use the replaceChild() method to replace elements in the HTML DOM.

Example

<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 a new paragraph.");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

 Try It! 

HTML DOM tutorial

In the HTML DOM part of our JavaScript tutorial, you have learned:

  • How to change the content of HTML elements (innerHTML)

  • How to change the style of HTML elements (CSS)

  • How to react to HTML DOM events

  • How to add or remove HTML elements

If you want to learn more about using JavaScript to access HTML DOM, please visit our complete HTML DOM tutorial .