DOM Nodes

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

DOM Nodes

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

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript HTML DOM</h2>

<p>Add a new HTML Element.</p>

<div id=”div1″>

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

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

</div>

<script>

const para = document.createElement(“p”);

const node = document.createTextNode(“This is new.”);

para.appendChild(node);

const element = document.getElementById(“div1”);

element.appendChild(para);

</script>

</body>

</html>

Output

JavaScript HTML DOM

Add a new HTML Element.

This is a paragraph.

This is another paragraph.

Example Explained

This code is used to create a new <p> element:

const para = document.createElement(“p”);

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

const node = document.createTextNode(“This is a new paragraph.”);

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

para.appendChild(node);

Finally, append the new element to an existing element.

This code finds an existing element:

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

Use the insertBefore() method:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript HTML DOM</h2>

<p>Add a new HTML Element.</p>

<div id=”div1″>

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

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

</div>

<script>

const para = document.createElement(“p”);

const node = document.createTextNode(“This is new.”);

para.appendChild(node);

const element = document.getElementById(“div1”);

const child = document.getElementById(“p1”);

element.insertBefore(para,child);

</script>

</body>

</html>

Output

JavaScript HTML DOM

Add a new HTML Element.

This is new.

This is a paragraph.

This is another paragraph.

Removing Existing HTML Elements

Use the remove() method to remove an HTML Elements.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript HTML DOM</h2>

<h3>Remove an HTML Element.</h3>

<div>

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

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

</div>

<button onclick=”myFunction()”>Remove Element</button>

<script>

function myFunction() {

document.getElementById(“p1”).remove();

}

</script>

</body>

</html>

Output

JavaScript HTML DOM

Remove an HTML Element.

This is a paragraph.

This is another paragraph.

Example Explained

The HTML document consists of 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>

Search for the element you want to remove:

const elmnt = document.getElementById(“p1”);

Execute the remove() method on that element:

elmnt.remove();

Removing a Child Node

For browsers that do not support the remove() method, find the parent node to remove an element.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript HTML DOM</h2>

<p>Remove Child Element</p>

<div id=”div1″>

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

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

</div>

<script>

const parent = document.getElementById(“div1”);

const child = document.getElementById(“p1”);

parent.removeChild(child);

</script>

</body>

</html>

Output

JavaScript HTML DOM

Remove Child Element

This is another paragraph.

Example Explained

This HTML document contains a <div> element with 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″:

const parent = document.getElementById(“div1”);

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

const child = document.getElementById(“p1”);

Remove the child from the parent:

parent.removeChild(child);

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

const child = document.getElementById(“p1”);

child.parentNode.removeChild(child);

Replacing HTML Elements

Use the replaceChild() method to replace an element in the HTML DOM.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript HTML DOM</h2>

<h3>Replace an HTML Element.</h3>

<div id=”div1″>

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

<p id=”p2″>This is a paragraph.</p>

</div>

<script>

const parent = document.getElementById(“div1”);

const child = document.getElementById(“p1”);

const para = document.createElement(“p”);

const node = document.createTextNode(“This is new.”);

para.appendChild(node);

parent.replaceChild(para,child);

</script>

</body>

</html>

Output

JavaScript HTML DOM

Replace an HTML Element.

This is a paragraph.

This is a paragraph.