What happen in DOM?

I have discovered the unexpected behavior of DOM when I was writing some JavaScript code. The example will illustrate the problem

// Create one container and add to two children to it
var container1 = document.createElement("DIV"); container1.appendChild(document.createElement("DIV"));
container1.appendChild(document.createElement("DIV"));

//Now I want to the two children in container to document.body
//Apparently, the code in the comment below should work
//document.body.appendChild(container1.childNodes[0]);
//document.body.appendChild(container1.childNodes[1]);

//Unfortunately, it does not work. When we appended the first child in container1 to
//document.body the browser automatically deleted that child from container. So,
//after the insertion container1 has only one child not two. The code should be like
//the below code:

document.body.appendChild(container1.childNodes[0]);
document.body.appendChild(container1.childNodes[0]);


Hope this help.