HTML and CSS Reference
In-Depth Information
Figure 15.25
After clone, style is applied to the text in the second paragraph.
Cloning a Table with a Unique
id
.
In the next example we clone a table, the same
table created in Example 15.13. Rather than copying all the code, this example shows
the steps necessary to clone the table and then give the new table a unique
id
.
EXAMPLE
15.14
<Continued from Example 15.11 at line 17.>
//
Insert the table into the document tree—line 17
//
in Example 15.11
Tcontainer=document.getElementById("TableContainer");
Tcontainer.appendChild(Table);
//
Let's make a copy of the table
1
var tableCopy = document.getElementById("myTable");
2
var newTable = tableCopy.cloneNode(true);
3
newTable.id = "newtable_id";
4
newDiv = document.getElementById("NewTableContainer");
5
newDiv.appendChild(newTable);
}
</script>
</head>
<body>
<div id="TableContainer"></div>
<br />
6
<div id="NewTableContainer"></div>
</body>
</html>
EXPLANATION
1
The
id
attribute for the table created in Example 15.11 is
myTable
. The
document.getElementById()
method returns a reference to that table.
2
The original table created in Example 15.11 is cloned with the
cloneNode()
meth-
od. It is a replica of the original table including all of its attributes.
3
Because the clone includes the
id
attribute, a new unique
id
is assigned to the
cloned table. The rule is that HTML
id
s must be unique or the program cannot
identify another element with the same
id
.
