IE’s cloneNode doesn’t actually clone!

When you want to deeply clone a node you use the cloneNode(true) method on the element you want to clone (see w3’s DOM Level 2 specifications)

IE Cant even clone

IE Cant even clone


I found that IE’s cloneNode method is broken. Yes, broken! If you want the cloned DOM structure to be exactly the same (i.e. a clone) then don’t use cloneNode. Take this example:

    var container = document.createElement("div");
    container.appendChild(document.createTextNode("Apples"));
    container.appendChild(document.createTextNode("Oranges"));
    alert(container.firstChild.nodeValue); // Will Print "Apples"

    container = container.cloneNode(true);
    alert(container.firstChild.nodeValue); // Prints "ApplesOranges" on IE!

As pointed out by the comments in the example above, the cloneNode operation consolidates the two text nodes together as one! This is incorrect!

If you need cloneNode to keep the structure cloned, then you could write your own deep-clone method. Here is an implementation:

    /**
     * Deeply clones a node
     * @param {Node} node A node to clone
     * @return {Node} A clone of the given node and all its children
     */
    function cloneNode(node) {
    	// If the node is a text node, then re-create it rather than clone it
        var clone = node.nodeType == 3 ? document.createTextNode(node.nodeValue) : node.cloneNode(false);
   
        // Recurse     
        var child = node.firstChild;
        while(child) {
            clone.appendChild(cloneNode(child));
            child = child.nextSibling;
        }
        
        return clone;
    }

Happy coding!

Advertisements

4 thoughts on “IE’s cloneNode doesn’t actually clone!

  1. I guess this is a good reason to start using jQuery. Instead of doing two lots of code – one for IE, and one for every other browser – you can just use jQuery which worries about browser compatibility for you, at the one off cost of a few millionths of a second load time.

    You might want to look at their .clone method. ( http://docs.jquery.com/Manipulation/clone )

  2. Yea if you don’t mind using a Javascript API in your Javascript project. Sometimes this is not an option.

    jQuerry handles this poorly. For IE they use innerHTML for cloning to combat against a cloneNode issue it has with events – consequently this not only consolidates text nodes, but furthermore it normalizes all whitespaces – thus very roughly cloning DOM structures in IE!

  3. “I guess this is a good reason to start using jQuery”

    Like every noob on the web these days spamming jQuery as the ultimate solution.
    Start learning javascript would be my advice for so many reasons.

    • Yea I’m pro-jquery for sure – such a great abstraction of js features, and really fun to program.
      But in some situations you may not have the luxury of using a 3rd party open source framework like jQuery (e.g. an enterprise solution that doesn’t permit use of open source software). I’d push for using jquery from the get go on any web project.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s