JavaScript HTML DOM Elements (Nodes)

This chapter describes how to add and remove elements (nodes) to and from a document.

Creating New HTML Elements (Nodes) - appendChild()

To create a new HTML element (node), you first need to create an element and then add it to an existing element.

Example Analysis

The following code is used to create a <p> element:

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

Create a new text node for the <p> element:

var node = document.createTextNode("这是一个新的段落。");

Add the text node to the <p> element:

para.appendChild(node);

Finally, add the p element to an existing element.

Find an existing element:

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

Add to an existing element:

element.appendChild(para);

Creating New HTML Elements (Nodes) - insertBefore()

In the example above, we used theappendChild()method, which is used to append new elements to the end.

If we need to add the new element at the beginning, we can use theinsertBefore()method:

Removing Existing Elements

To remove an element, you need to know the parent element of that element.

Note:Early Internet Explorer browsers do not support the node.remove() method.

Example Analysis

In the HTML document, the <div> element contains two child nodes (two <p> elements):

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</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 you could delete an element without referencing its parent. Unfortunately, it does not work that way. The DOM needs to know the element you want to delete and its parent element.

The following code finds the child element to be removed, then finds its parent element, and then removes that child element (you must know the parent node to delete a node):

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

Replacing HTML Elements - replaceChild()

We can use the replaceChild() method to replace elements in the HTML DOM.

HTML DOM Tutorial

In the HTML DOM section of our JavaScript tutorial, you have learned:

• How to change the content of an HTML element (innerHTML)
• How to change the style of an HTML element (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 the HTML DOM, please visit our completeHTML DOM Tutorial。