Home > Developer > JavaScript
In many cases, we use for to generate multiple node structures with the same structure, so we need to write a lot of code such as createElement, setAttribute, and appendChild.
However, we only need an html template to clone existing nodes, including its subnodes, using the cloneNode method.
The following is a cloneNode method prototype:
NewElement oldElement. cloneNode (bool deep );
This method has only one parameter deep and a Boolean value. If it is true, the oldElement and its subnodes are cloned. Otherwise, only the node itself is possible.
The returned value is a cloned node newElement.
Below is the test code, test.htm and test. js files.
Copy codeThe Code is as follows:
<! -- Test.htm -->
<Html>
<Head>
<Title> Test of cloneNode Method </title>
<Script type = "text/javascript" src = "test. js"> </script>
</Head>
<Body>
<Div id = "main">
<Div id = "div-0">
<Span> Cloud018 said, </span>
<Span> "Hello World !!! "</Span>
</Div>
</Div>
</Body>
</Html>
Code
Copy codeThe Code is as follows:
// Test. js
Window. onload = function (){
Var sourceNode = document. getElementById ("div-0"); // get the cloned Node object
For (var I = 1; I <5; I ++ ){
Var clonedNode = sourceNode. cloneNode (true); // clone a node
ClonedNode. setAttribute ("id", "div-" + I); // modify the id value to avoid duplicate IDs.
SourceNode. parentNode. appendChild (clonedNode); // insert a cloned node to the parent node.
}
}
The webpage loading result is as follows:
It can be seen from Google Chrome's developer tools that the node Structure of the div-0 has been copied.
When the cloneNode's deep parameter is set to false, only the div-0 Node itself is cloned, and its child node (that is, its content) is not copied.
Copy codeThe Code is as follows: var clonedNode = sourceNode. cloneNode (false );
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
