DOM Elements
JavaScript HTML DOM element (node)
This chapter describes how to add and remove elements (nodes) from the document.
Create a new HTML element (node) - appendChild()
To create a new HTML element (node), you need to create an element first, and then add 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
The following code is used to create the <p> element:
var para = document.createElement("p");
Create a new text node for the <p> element:
var node = document.createTextNode("This is a new paragraph.");
Add the text node to the <p> element:
para.appendChild(node);
Finally, add the p element to an existing element.
Find existing elements:
var element = document.getElementById("div1");
Add to an existing element:
element.appendChild(para);
Create a new HTML element (node) - insertBefore()
In the above example, we used the appendChild() method, which is used to add new elements to the end.
If we need to add a new element to the starting position, we 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 elements
To remove an element, you need to 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>
Note: Early Internet Explorer browsers do not support the node.remove() method.
Example analysis
The <div> element in the HTML document contains 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":
var parent = document.getElementById("div1");
Find the <p> element with id="p1":
var child = document.getElementById("p1");
Remove the child node from the parent element:
parent.removeChild(child);
![]() | It would be great if an element can be deleted without referencing the parent element. But it's a pity. The DOM needs to be clear about the element you need to delete and its parent element. |
---|
The following code is known to find the child element, and then find its parent element, and then delete this child element (delete node must know the parent node):
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
Replace HTML Elements - replaceChild()
We can use the replaceChild() method to replace elements in the HTML DOM.
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 parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para, child); </script>
HTML DOM tutorial
In the HTML DOM part of our JavaScript tutorial, you have learned:
How to change the content of HTML elements (innerHTML)
How to change the style of HTML elements (CSS)
How to react to HTML DOM events
How to add or remove HTML elements
If you want to learn more about using JavaScript to access HTML DOM, please visit our complete HTML DOM tutorial .