❮ Js Validation Api Js Form Validation ❯

JavaScript HTML DOM Elements (Nodes)

This section introduces how to add and remove elements (nodes) in a document.

Creating New HTML Elements (Nodes) - appendChild()

To create a new HTML element (node), you need to first create an element 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>

Example Explained

The following code is used to create a  element:

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

Create a new text node for the  element:

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

Append the text node to the  element:

para.appendChild(node);

Finally, add the  element to an existing element.

Find an existing element:

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

Add to the existing element:

element.appendChild(para);

Creating New HTML Elements (Nodes) - insertBefore()

In the above example, we used the appendChild() method, which adds the new element to the end.

If we need to add the new element at the beginning, 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>

Removing 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>

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

Example Explained

The <div> element in the HTML document contains two child nodes (two  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  element with id="p1":

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

Remove the child node from the parent element:

parent.removeChild(child);

| | It would be great if you could remove an element without referring to the parent element. Unfortunately, however. The DOM needs to know the element you want to remove and its parent element. | | --- | --- |

The following code finds the child to be removed and then finds its parent in order to remove the child (removing a node must know the parent node):

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

Replacing 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>

HTML DOM Tutorial

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

How to change the content of HTML elements (innerHTML)
How to change the style (CSS) of HTML elements
How to react to HTML DOM events
How to add or remove HTML elements

If you want to learn more about accessing the HTML DOM with JavaScript, visit our complete HTML DOM Tutorial.

❮ Js Validation Api Js Form Validation ❯