childNodes property of DOM object

A day when I paired with my friend, Sophy to code a javascript function, I found something that is unexpected behavior to both of us. It is the childNodes property of a dom object. I am not sure this is a default behavior of dom manipulation of javascript or not.

For example, you have a parent div container called "parentDiv", and it has two child containers. This parentDiv can be either added to the browser document or not, it doesn't matter. When we try add the child element of parentDiv to the browser document​ or to another dom element, the childNodes property of parentDiv is always updated from 2 to 0. Notice the following code:


var parentDiv = document.createElement("div");
var div1 = document.createElement("div");
div1.innerHTML = "hello1";
var div2 = document.createElement("div");
div2.innerHTML = "hello2";

parentDiv.appendChild(div1);
parentDiv.appendChild(div2);

alert(parentDiv.childNodes.length); //2
document.body.appendChild(div1);

alert(parentDiv.childNodes.length); //1
document.body.appendChild(div2);

alert(parentDiv.childNodes.length); //0