Curriculum

JavaScript Basic

JSHome

0/216

JS Versions

0/36

JS Objects

0/15

JS Funtions

0/22

JS Classes

0/3

JS Async

0/10

JS HTML DOM

0/25

JS Browser BOM

0/17

JS Web APIs

0/7

JS AJAX

0/11

JS JSON

0/16

JS vs jQuery

0/4

JS Graphics

0/7

Text lesson

DOM Nodes

Adding and removing nodes (HTML elements) involves inserting or deleting elements within the document structure of a webpage using JavaScript.

Creating New HTML Elements (Nodes)

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

Example

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

Example Explained

This code generates a new <p> element:

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

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

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

Next, you need to append the text node to the <p> element:

para.appendChild(node);

Finally, you must append the new element to an existing element.

This code locates an existing element:

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

This code adds the new element to the existing element:

element.appendChild(para);

Creating new HTML Elements – insertBefore()

In the previous example, the appendChild() method added the new element as the last child of the parent. If you prefer not to do that, you can use the insertBefore() method instead.

Example

const element = document.getElementById(“div1”);
const child = document.getElementById(“p1”);
element.insertBefore(para, child);
</script>

Removing Existing HTML Elements

Use the remove() method to delete an HTML element.

Example

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

<script>
const elmnt = document.getElementById(“p1”); elmnt.remove();
</script>

Example Explained

The HTML document includes a <div> element that contains two child nodes (two <p> elements).

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

Locate the element you wish to remove:

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

Next, call the remove() method on the element to remove it:

elmnt.remove();

Removing a Child Node

For browsers that do not support the remove() method, you need to locate the parent node in order to remove the element.

Example

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

Example Explained

This HTML document includes a <div> element with two child nodes, each being a <p> element.

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

Locate the element with id=”div1″:

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

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

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

Remove the child element from its parent:

parent.removeChild(child);

A common workaround is to locate the child you want to remove, and then use its parentNode property to access the parent.

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

Replacing HTML Elements

To replace an element in the HTML DOM, use the replaceChild() method.

Example

const parent = document.getElementById(“div1”);
const child = document.getElementById(“p1”);
parent.replaceChild(para, child);
</script>