Copying one DOM XML node to another in JavaScript

Question

I wrote a simple function to copy contents(including all child nodes) from one node to another of an XML DOM Object.

Surprisingly in the function, the for loop is not iterating for n=1 for some reason i cant figure out, please help, i've been trying to debug this in all possible ways from 4 days.

This function is not iterating for n=1 (i.e. it's iterating for n=0 and n=2 and so on except n=1):

function copyNode(fromNode, toNode) {

 for (var n=0; n [lessthan] fromNode.childNodes.length; n++) {
   var fromChild = fromNode.childNodes[n];
   var toChild = toNode.appendChild(fromChild);
   copyNode(fromChild, toChild);
 }
}

Full code:

<html>
<head>


<script type="text/javascript">

//STANDARD TEXT to XMLDOM OBJECT RETURN FUNCTION
function getXmlDoc(text){
var xmldoc = null;
try //Internet Explorer
{
xmldoc=new ActiveXObject("Microsoft.XMLDOM");
xmldoc.async="false";
xmldoc.loadXML(text);
return xmldoc;
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
parser=new DOMParser();
xmldoc=parser.parseFromString(text,"text/xml");
return xmldoc;
}
catch(e)
{
alert(e.message);
return;
}
}
}
//END OF getXmlDoc

//Function that refuses to work, the 2nd child is always being skipped, i.e n=1 is never running :(, ONLY n=1 is not running
function copyNode(fromNode, toNode) {

 for (var n=0; n [lessthan] fromNode.childNodes.length; n++) {
   var fromChild = fromNode.childNodes[n];
   var toChild = toNode.appendChild(fromChild);
   copyNode(fromChild, toChild);
 }
}

//Function to clear a node's contents
function clearNode(node2)
{
x2=node2.childNodes;
if(x2.length!=0)
{
for(i=0;i [lessthan] x2.length;i++)
{
    node2.removeChild(x2[i]);
}
}
}

//XML1
text="<book>";
text=text+"<title>Everyday Italian</title>";
text=text+"<author>Giada De Laurentiis</author>";
text=text+"<year>2005</year>";
text=text+"</book>";

xmlDoc=getXmlDoc(text);

//XML2
text2="<book>";
text2=text2+"<title><a>1</a><b>2</b><c><ca>3</ca></c></title>";
text2=text2+"<year>2006</year>";
text2=text2+"</book>";

xmlDoc2=getXmlDoc(text2);

x=xmlDoc.documentElement.childNodes;
y=xmlDoc2.documentElement.childNodes;
var string = (new XMLSerializer()).serializeToString(y[0]);
alert(string);
var string = (new XMLSerializer()).serializeToString(x[0]);
alert(string);
clearNode(x[0]);
copyNode(y[0],x[0]);
var string = (new XMLSerializer()).serializeToString(xmlDoc);
alert(string);
</script>
</head>
<body>
</body>
</html>

NickFitz · Accepted Answer · 2009-06-05 13:42:12Z

3

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.

answered Jun 5, 2009 at 13:42

NickFitz

35.2k8 gold badges46 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

smhx Over a year ago

thank you, sir, you saved me from brain-damage. i thought it was copying the node and not moving it because none of the functions explicitly specify the word move/copy. and i was always debugging to check the resultant node and never check what was happening to the source node. ty once again

Robert Koritnik · Accepted Answer · 2009-06-05 08:05:55Z

0

Your line:

copyNode(toChild, fromChild);

should be

copyNode(fromChild, toChild);

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

edited Jun 5, 2009 at 8:05

answered Jun 5, 2009 at 8:00

Robert Koritnik

105k57 gold badges286 silver badges415 bronze badges

Comments

trydyingtolive · Accepted Answer · 2009-06-05 16:39:03Z

0

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.

answered Jun 5, 2009 at 16:39

trydyingtolive

3271 silver badge9 bronze badges

2 Comments

smhx Over a year ago

thank you for the answer but i got this error in firefox " Error: fromNode.childNodes[i].cloneNode is not a function" i dint explore it further because the above solution worked, please let me know if you want me to debug the code with your solution.

trydyingtolive Over a year ago

That's interesting. I confess I didn't test the code since I've never actually needed to clone a node before. I took cloneNode from developer.mozilla.org/En/DOM/Node.cloneNode so I'm surprised it didn't work.

Collectives™ on Stack Overflow

Copying one DOM XML node to another in JavaScript

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related