Why doesn't this script end in infinite loop?

Question

I am trying to understand a code I found on the internet. I dont't understand in the while loop, why it is not an infinite loop. If change the calculator.appendChild in it to e.g. console.log it runs forever.

 window.location.hash = 1;
 var calculator = document.createElement("div");
 calculator.id = "height-calculator";
 while (document.body.firstChild) {
    calculator.appendChild(document.body.firstChild);
 }
 document.body.appendChild(calculator);
 document.title = calculator.clientHeight;

Basically there is always a first child in a non-empty site, so the condition is always true. Can someone explain why this way it doesn't run forever?

Answer 1

A element can only be child of one other element.

calculator.appendChild(document.body.firstChild);

As soon as you attach document.body.firstChild to your calculator, it automatically detaches from body, so body will eventually run out of children.

Answer 2

So process happens in 3 simple steps:

1. var calculator = document.createElement("div"); this line creates a div OUTSIDE of the body in the DOM

2. Then the loop moves all the children of body into the calculator which eventually ends unless body has infinite children which is not possible.

3. document.body.appendChild(calculator); moves the calculator under body

So basically there are two major entities body and calculator, script moves all the children of body to calculator and then it moves calculator to body.

In other words script converts all children of body to the grandchildren of body and the only child of body becomes the calculator

I know I wrote too much but I myself understood it after a while, reading other comments and answers so I just wanted to leave it here for myself for future and for anyone else who needs more explanation to get it LOL