True: Completely copy a node, what is called complete, is to copy everything, including his child nodes, so that text nodes, all of which are cloned, the so-called complete
False: Clones only the current node, does not clone any child nodes, and of course does not clone the text that he wraps, because any text has a node (text node) that points to him.
Of course, sometimes the two can be universal, oh, if you want to replicate the node does not have any child nodes, this is congruent;
For the sake of understanding, let me give you a little example:
Copy Code code as follows:
<div>
<span>Shadow</span> | No Shadow
</div>
I define a variable to point to the span node
var element = document.getElementsByTagName (' span ') [0];
So
Copy Code code as follows:
var T1 = Element.clonenode (false). innerhtml;//do not replicate child nodes
var t2 = Element.clonenode (true). Innerhtml;//copy All
alert (t1);
alert (T2);
This will be output sequentially (empty) "" and shadow;
Copy Code code as follows:
var textnode = element.firstchild;//point to 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 bugs."
In the above multi-level linkage, will use CloneNode replication container, but clonenode in IE has a bug:
In IE, the attachevent is used to bind events to DOM elements, and the events are replicated after CloneNode.
The following code can be tested in IE and FF by the events added with AddEventListener:
<! DOCTYPE html> <ptml> <body> <div id= "T" >div</div> <script> var o = document.geteleme Ntbyid ("T"); if (o.attachevent) {o.attachevent ("onclick", function () {alert (2)}); }else{O.addeventlistener ("click", Function () {alert (2)}, False); } document.body.appendChild (O.clonenode (true)); </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Click on IE and ff the first DIV will trigger alert, the key is the second Div, in FF will not trigger, and IE will.
Of course this is not a bug is not clear, perhaps attachevent is designed this is probably.
But the first edition is due to this bug, but not with CloneNode.
Before you find a solution, expand the problem to see if you can add the onclick event directly to the same bug.
First Test adds onclick inside the element:
<! DOCTYPE html> <ptml> <body> <div id= "T" onclick= "alert (1)" >div</div> <script> var o = document.getElementById ("T"); Document.body.appendChild (O.clonenode (true)); </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
As a result, events are replicated in both IE and ff.
Re-test in JS add onclick:
<! DOCTYPE html> <ptml> <body> <div id= "T" >div</div> <script> var o = document.geteleme Ntbyid ("T"); O.onclick = function () {alert (1)} document.body.appendChild (O.clonenode (true)); </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Results in IE and FF do not replicate events, it seems only attachevent will cause this bug.
Here's how to fix it:
Add/Remove events with John Resig's Addevent and Removeevent method, written by Dean Edwards, which is recommended in "proficient JavaScript."
Its benefits are needless to say, and it can solve the CloneNode bug mentioned above in IE.
Because its implementation principle is in IE with the onclick to bind the event, and the above test also proves that the event with onclick binding is not copied by CloneNode.
