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