Node Manipulation
appendChild()
appendChild() adds a node to the end of the childNodes list.
It updates all of the relationship pointers in the newly added node, the parent node, and the previous last child in the childNodes list.
When complete, appendChild() returns the newly added node. Here is an example:
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<p id="p1">Hello <b>World!</b></p>
<!--from w ww. j av a 2 s . co m-->
<script type="text/javascript">
var div = document.getElementById("div1");
var p = document.getElementById("p1");
var returnedNode = div.appendChild(p);
document.writeln(returnedNode == p); //true
document.writeln(div.lastChild == p); //true
</script>
</body>
</html>
If the node passed into appendChild() is
already part of the document, it is removed from its previous
location and placed at the new location.
insertBefore()
insertBefore() accepts two arguments: the node to insert and a reference node.
The node to insert becomes the previous sibling of the reference node and
is ultimately returned by the method.
If the reference node is null, then insertBefore() acts the same as appendChild().
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div><!--from w ww . j ava 2s. c o m-->
<p id="p1">Hello <b>World!</b></p>
<script type="text/javascript">
var div = document.getElementById("div1");
var p = document.getElementById("p1");
//insert as last child
var returnedNode = div.insertBefore(p, null);
document.writeln(p == div.lastChild); //true
</script>
</body>
</html>
The following code inserts as the new first child.
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div><!-- w w w. j a v a 2 s.c o m-->
<p id="p1">Hello <b>World!</b></p>
<script type="text/javascript">
var div = document.getElementById("div1");
var p = document.getElementById("p1");
//insert as the new first child
var returnedNode = div.insertBefore(p, div.firstChild);
document.writeln(returnedNode == p); //true
document.writeln(p == div.firstChild); //true
</script>
</body>
</html>
The following code inserts before last child.
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul><!--from www . ja v a 2 s. c o m-->
</div>
<p id="p1">Hello <b>World!</b></p>
<script type="text/javascript">
var div = document.getElementById("div1");
var p = document.getElementById("p1");
//insert before last child
var returnedNode = div.insertBefore(p, div.lastChild);
document.writeln(p == div.childNodes[div.childNodes.length-2]); //true
</script>
</body>
</html>
replaceChild()
replaceChild() method accepts two arguments:
- the node to insert
- the node to replace
The node to replace is returned
The following code replaces the first child from its parent.
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<p id="p1">Hello <b>World!</b></p>
<!--from w w w . ja v a 2s . c o m-->
<script type="text/javascript">
var div = document.getElementById("div1");
var p = document.getElementById("p1");
var returnedNode = div.replaceChild(p, div.firstChild);
document.writeln(returnedNode);
</script>
</body>
</html>
Replace last child
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<p id="p1">Hello <b>World!</b></p>
<!-- www .ja v a2 s .c o m-->
<script type="text/javascript">
var div = document.getElementById("div1");
var p = document.getElementById("p1");
var returnedNode = div.replaceChild(p, div.lastChild);
document.writeln(returnedNode);
</script>
</body>
</html>
A node removed via replaceChild() is still
owned by the document but doesn't have a specific
location in the document.
removeChild()
The removeChild() method removes a node.
This method accepts a single argument,
which is the node to remove.
The removed node is returned:
The following code removes first child from its parent.
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<p id="p1">Hello <b>World!</b></p>
<!-- w w w . ja v a 2 s . c o m-->
<script type="text/javascript">
var div = document.getElementById("div1");
var p = document.getElementById("p1");
var formerFirstChild = div.removeChild(div.firstChild);
document.writeln(formerFirstChild);
</script>
</body>
</html>
The following code removes the last child.
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<p id="p1">Hello <b>World!</b></p>
<!-- www . ja v a 2 s .co m-->
<script type="text/javascript">
var div = document.getElementById("div1");
var p = document.getElementById("p1");
var formerLastChild = div.removeChild(div.lastChild);
document.writeln(formerLastChild);
</script>
</body>
</html>
A node removed via removeChild() is still owned by the
document but doesn't have a specific location in the document.
Note
All four of these methods work on the immediate children of a specific node, meaning that to use them you must know the immediate parent node.
Not all node types can have child nodes, and these methods will throw errors if you attempt to use them on nodes that don't support children.