The cloneNode Method
The cloneNode method creates a stand-alone element under the document object, by cloning an existing node. This element is not related to any other existing document nodes. The only information attached to such a node is the HTML tag if it is a clone of an HTML tag node, or its string value if it is a clone of a text node. Let's take our previous TABLE example. We have 3 rows in the table, two cells in each row. Each cell includes one text node. Instead of using the createElement method for each row and cell, we can create one row and one cell and then clone them the right amount of times. Same goes for the text nodes. We can use the createTextNode once, and then clone the node five more times. The content strings are assigned separately then. Here is the script:
<HTML>
<HEAD>
<TITLE> DOM Demo </TITLE>
</HEAD>
<BODY ID="bodyNode">
<SCRIPT LANGUAGE="JavaScript">
<!--
row1cell1Obj = document.createTextNode("This is row 1, cell 1");
tableObj = document.createElement("TABLE");
tbodyObj = document.createElement("TBODY");
tr1Obj = document.createElement("TR");
tr1td1Obj = document.createElement("TD");
tr1td2Obj = tr1td1Obj.cloneNode(false);
tr2td1Obj = tr1td1Obj.cloneNode(false);
tr2td2Obj = tr1td1Obj.cloneNode(false);
tr3td1Obj = tr1td1Obj.cloneNode(false);
tr3td2Obj = tr1td1Obj.cloneNode(false);
tr2Obj = tr1Obj.cloneNode(false);
tr3Obj = tr1Obj.cloneNode(false);
row1cell2Obj = row1cell1Obj.cloneNode(false);
row2cell1Obj = row1cell1Obj.cloneNode(false);
row2cell2Obj = row1cell1Obj.cloneNode(false);
row3cell1Obj = row1cell1Obj.cloneNode(false);
row3cell2Obj = row1cell1Obj.cloneNode(false);
row1cell2Obj.nodeValue = "This is row 1, cell 2";
row2cell1Obj.nodeValue = "This is row 2, cell 1";
row2cell2Obj.nodeValue = "This is row 2, cell 2";
row3cell1Obj.nodeValue = "This is row 3, cell 1";
row3cell2Obj.nodeValue = "This is row 3, cell 2";
alert(
"row1cell1Obj.firstChild = " + row1cell1Obj.firstChild + "\n" +
"row1cell1Obj.nodeName = " + row1cell1Obj.nodeName + "\n" +
"row3cell2Obj.nodeValue = " + row3cell2Obj.nodeValue + "\n" +
"tr3td2Obj.nodeName = " + tr3td2Obj.nodeName + "\n"
);
// -->
</SCRIPT>
</BODY>
</HTML>
Notice the alert box that pops up when you run the script. It shows that the nodes do not have any children and that cloning and the value setting worked OK. It also shows that the cloneNode method returns the cloned object. We'll use this cloning capability later in this column.
The behavior of the cloneNode method depends on its parameter. cloneNode(true) clones the whole subtree rooted at the node. When you call cloneNode() with the false parameter, the browser just duplicates the node itself, without its children or its father. The following example demonstrates this behavior:
<HTML>
<HEAD>
<TITLE> Simple DOM Demo </TITLE>
</HEAD>
<BODY ID="bodyNode">
<TABLE ID="tableNode">
<TBODY>
<TR ID="tr1Node"><TD BGCOLOR="yellow">This is row 1, cell 1</TD>
<TD BGCOLOR="orange">This is row 1, cell 2</TD></TR>
<TR ID="tr2Node"><TD BGCOLOR="red">This is row 2, cell 1</TD>
<TD BGCOLOR="magenta">This is row 2, cell 2</TD></TR>
<TR ID="tr3Node"><TD BGCOLOR="lightgreen">This is row 3, cell 1</TD>
<TD BGCOLOR="beige">This is row 3, cell 2</TD></TR>
</TBODY>
</TABLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
tr2Obj = tr1Node.cloneNode(false);
alert(
"tr2Obj.firstChild = " + tr2Obj.firstChild + "\n" +
"tr2Obj.nodeName = " + tr2Obj.nodeName
);
// -->
</SCRIPT>
</BODY>
</HTML>
Check this script out and see from the alert box that the cloned node do not have any children, while its origin does.
You can clone a whole subtree by calling the cloneNode method with the true parameter. Click here to see the previous example with the true parameter. See from the alert box that the cloned node does have children, as oppose to the previous example in which it did not have any children.
  
| 
