Home > Developer > JavaScript
True: Completely copying a node. What is "complete" means copying everything, including its subnodes, so that all the text nodes and all others are cloned.
False: only the current node is cloned. No child node is cloned. Of course, the wrapped text is not cloned because any text has a node (text node) pointing to it)
Of course, sometimes the two can be used in a general sense. If the node to be copied does not have any sub-nodes, they are all; for example, img...
To make everyone understand more deeply, let's take a small example:
Copy codeThe Code is as follows:
<Div>
<Span> Shadow </span> | No Shadow
</Div>
I define a variable to point to a span node.
Var element = document. getElementsByTagName ('span ') [0];
So
Copy codeThe Code is as follows:
Var t1 = element. cloneNode (false). innerHTML; // do not copy subnodes
Var t2 = element. cloneNode (true). innerHTML; // copy all
Alert (t1 );
Alert (t2 );
This will output (null) "" and Shadow in sequence;
Copy codeThe Code is as follows:
Var textnode = element. firstChild; // point to a text node
Var t1 = textnode. cloneNode (false). nodeValue;
Var t2 = textnode. cloneNode (true). nodeValue;
Alert (t1 );
Alert (t2 );
This is where they will output Shadow at the same time.
[CloneNode bug]
As mentioned above, cloneNode is used to copy containers, but cloneNode has a bug in ie:
When ie uses attachEvent to bind events to dom elements, the events are also copied after cloneNode.
The events added with addEventListener are not. You can test the following code in ie and ff:
<! DOCTYPE html> <body> div </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
When you click the first div in ie and ff, alert is triggered. The key is the second div. If you do not click ff, ie will.
Of course, it is not clear whether this is a bug. Maybe attachEvent is designed in this way.
But the first version does not use cloneNode because of this bug.
Before finding a solution, extend the issue to see if the onclick event has the same bug.
First, add onclick to the element:
<! DOCTYPE html> <body> div </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Both ie and ff copy the event.
Then test how to add onclick in js:
<! DOCTYPE html> <body> div </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Neither ie nor ff will replicate the event. It seems that only attachEvent will cause this bug.
The solution is as follows:
Use the addEvent and removeEvent Methods written by Dean Edwards recommended by John Resig in JavaScript proficiency to add/remove events.
The benefits of cloneNode are needless to say, and it can solve the cloneNode bug mentioned above in ie.
Because its implementation principle is to use onclick to bind events in ie, and the above test also proves that events bound with onclick will not be copied by cloneNode.
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
