HTML DOM - Elements

Add, remove, and replace HTML elements.

Creating New HTML Elements - createElement()

To add a new element to the HTML DOM, you must first create the element, then append 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

This code creates a new <p> element:

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

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

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

This code finds an existing element:

This code appends the new element to the existing element:

Creating New HTML Elements - insertBefore()

The appendChild() method in the previous example adds the new element as the last child of the parent element.

If you don't want that, you 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 HTML Elements

To remove an HTML element, you must 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>

Example Explained

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

Find the element with id="div1":

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

Remove the child element from the parent element:

| | Can you remove an element without referencing its parent element? <br>Unfortunately, the DOM requires knowledge of both the element you want to remove and its parent element. | | --- | --- |

Here's a common workaround: find the child element you want to remove, then use the parentNode property to find its parent element:

Replacing HTML Elements

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

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");
var para = document.createElement("p");
var node = document.createTextNode("This is a new paragraph.");
para.appendChild(node);
parent.replaceChild(para, child);
</script>