javascript dom operation cloneNode text node cloning usage skills_javascript skills

true: Completely copy a node. What is complete? It means copying everything, including its child nodes, and even text nodes, all existing ones will be cloned. The so-called complete

false: Only clone the current node. It will not clone any child nodes, and of course it will not clone the text it wraps, because any text has a node (text node) pointing to it
Of course, sometimes the two can be used universally, if the node to be copied does not Any child node is congruent; for example, img...

In order to make everyone understand more deeply, let’s give a small example:

Copy code The code is as follows:

Shadow |No Shadow

I define a variable to point to the span node

var element = document.getElementsByTagName('span')[0];
Then

Copy code The code is as follows:

var t1 = element.cloneNode(false).innerHTML;/ /Do not copy child nodes
var t2 = element.cloneNode(true).innerHTML;//copy all
alert(t1);
alert(t2);

this Yes, (empty) "" and Shadow will be output in sequence;

Copy the code The code is 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 when they will output Shadow at the same time.

[cloneNode bug]

As mentioned in the multi-level linkage above, cloneNode will be used to copy the container, but cloneNode has a bug in IE:
In ie, use attachEvent to bind events to dom elements, and the events will be copied after cloneNode.
The events added with addEventListener will not. You can test the following code in ie and ff:

<div id="t">div</div>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

Click on the ie and ff Each div will trigger alert. The key is the second div. It will not trigger in ff, but it will in ie.
Of course it is not clear whether this is a bug, maybe attachEvent was originally designed this way.
But the first version did not use cloneNode because of this bug.

Before looking for a solution, expand this problem and see if adding the onclick event directly will cause the same bug.
First test adding onclick inside the element:

<div id="t" onclick="alert(1)"> </div>div
[Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh to execute
]

The results will be in both ie and ff Copy event.

Test adding onclick in js again: <div id="t"> </div> div

[Ctrl A select all Note: <script> var o = document.getElementById("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>If you need to introduce external Js, you need to refresh to execute <script> var o = document.getElementById("t"); document.body.appendChild(o.cloneNode(true)); </script>]<script> var o = document.getElementById("t"); o.onclick = function(){alert(1)} document.body.appendChild(o.cloneNode(true)); </script>
As a result, events will not be copied in ie and ff. It seems that only attachEvent will cause this bug.

The following is the solution:
Use the addEvent and removeEvent methods recommended by John Resig in "Mastering JavaScript" Dean Edwards to add/remove events.
Needless to say its benefits, 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.