HTML DOM Elements

Add, remove and replace HTML elements.

Create a new HTML element - createElement()

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

 Try It! 

Example analysis

This code creates a new <p> element:

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

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

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

Then you have to append text nodes to the <p> element:

para.appendChild(node);

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

This code finds an existing element:

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

This code appends a new element to this existing element:

element.appendChild(para);

Create new HTML element - insertBefore()

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

If this is not desired, 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>

 Try It!

Remove existing HTML elements

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

Try It! 

Example analysis

This HTML document contains a <div> element with two children (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":

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

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

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

Remove child element from parent element:

parent.removeChild(child);

	Can an element be removed without referencing the parent element? NO! The DOM needs to know the element you need to remove, and its parent.

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

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

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

Try It!