Copying one DOM XML node to another in javascript

Answer 1

Your line:

copyNode(toChild, fromChild);

should be

copyNode(fromChild, toChild);

When your function comes from recursion your fromChild element is empty...

Answer 2

As you move (not copy) the source nodes to the destination, they are removed from the list of childNodes on the source, and its length decreases.

You should use something like:

while (fromNode.firstChild) {
    toNode.appendChild(fromNode.firstChild);
}

instead.

Also, you don't need the recursion; when the node is moved, all its children will be moved with it.

Answer 3

Here is the way I would do it (which may or may not be preferred).

function copyElementChildren(fromNode,toNode){
    for (var i in fromNode.childNodes) {
        var node = fromNode.childNodes[i].cloneNode(true);
        toNode.appendChild(node);
    };
};

This uses cloning to copy it the element. The true in cloneNode(true) tells the browser to copy its attributes and childNodes as well.