This site is mobile accessible. Press the "Tap Here" button to use a larger font-size.

Smartphone icons created by Freepik - Flaticon

14.12 DOM Nodes

Adding and Removing Nodes (HTML Elements)

Creating New HTML Elements (Nodes)

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

Example 1: JS HTML DOM - Creating New HTML Elements (Nodes)

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

Example Explained

This code creates a new <p> element:

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

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

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

Then you must append the text node to the <p> element:

para.appendChild(node);

Finally you must append the new element to an existing element.
This code finds an existing element:

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

This code appends the new element to the existing element:

element.appendChild(para);

Creating new HTML Elements - insertBefore()

The appendChild() method in the previous example, appended the new element as the last child of the parent.
If you don't want that you can use the insertBefore() method:

Example 2: JS HTML DOM - Creating new HTML Elements - insertBefore()

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

Removing Existing HTML Elements

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

Example 3: JS HTML DOM - Removing Existing HTML Elements

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

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

Example Explained

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

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

Find the element you want to remove:

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

Then execute the remove() method on that element:

elmnt.remove();

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

Removing a Child Node

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

Example 4: JS HTML DOM - Remove Child Element

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

Example Explained

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

<div>
  <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 from the parent:

parent.removeChild(child);

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

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

Replacing HTML Elements

To replace an element to the HTML DOM, use the replaceChild() method:

Example 5: JS HTML DOM - Replacing an HTML Elements

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

JavaScript Fundamentals course home
Module 14. JS HTML DOM

Navigate this module

Eventually the navigation links, above, will be replaced by these << (previous) and >> (next) buttons below.

JavaScript icons used in the buttons provided by ICONS8.COM. Smartphone icons created by Freepik - Flaticon

Example files created in this module:
HTML DOM Methods JS HTML DOM - Finding HTML Element by Id JS HTML DOM - Finding HTML Elements by Tag Name part 1 JS HTML DOM - Finding HTML Elements by Tag Name part 2 JS HTML DOM - Finding HTML Elements by Class Name JS HTML DOM - Finding HTML Elements by CSS Selectors JS HTML DOM - Finding HTML Elements by HTML document.forms JS Changing HTML Content part 1 JS Changing HTML Content part 2 JS HTML DOM - Changing the Value of an Attribute JS HTML DOM - Dynamic HTML content JS HTML DOM - document.write() JS Validation - HTML Form Example part 1 JS Validation - HTML Form Example part 2 JS HTML DOM - Changing the HTML style JS HTML DOM - Changing the HTML style Using Events My first JS animation part 1 My first JS animation part 2 JS HTML Events - The onclick Attribute part 1 JS HTML Events - The onclick Attribute part 2 JS HTML Events - The onclick Attribute part 3 JS HTML Events - The onclick Attribute part 4 JS HTML Events - The onload Attribute JS addEventListener() part 1 JS addEventListener() part 2 JS addEventListener() part 3 JS addEventListener() part 4 JS addEventListener() part 5 JS addEventListener() part 6 JS addEventListener() part 7 JS addEventListener() part 8 JS removeEventListener() JS HTML Child Nodes and Node Values part 1 JS HTML Child Nodes and Node Values part 2 JS HTML Child Nodes and Node Values part 3 JS HTMLDOM - DOM Root Nodes part 1 JS HTMLDOM - DOM Root Nodes part 2 JS HTMLDOM - The nodeName Property JS HTMLDOM - The nodeType Property JS HTML DOM - Creating New HTML Elements (Nodes) JS HTML DOM - Creating new HTML Elements - insertBefore() JS HTML DOM - Removing Existing HTML Elements JS HTML DOM - Remove Child Element JS HTML DOM - Replacing an HTML Elements JS HTML DOM Collections JS HTML DOM Collections - HTMLCollection Length par 1 JS HTML DOM Collections - HTMLCollection Length part 2 JS HTML DOM - DOM Node Lists JS HTML DOM - DOM Node List Length part 1 JS HTML DOM - DOM Node List Length part 2