JS_ how to create and appendChildren inside each other.

Question

Start with:
<div class = "a">

</div>

Then in JS, create n more elements (5) with the class ‘a’ then nest each element inside each other.

Result should be something like:
<div class = ‘a’>
<div class = ‘a’>
<div class = ‘a’>
<div class = ‘a’>
<div class = ‘a’> ... </div>
</div>
</div>
</div>
</div>

So one of those children is the leader of all, then there is second place... nesting each other.

Started code:
https://code.sololearn.com/WiJamfrphp4S/?ref=app

Answer 1

This is the solution i came up with, what it does is it keeps track of last appended child and appends a new child inside of it.

let lastAppended = null;

window.onload = () =>{
parent = document.querySelector('.a');
for(let i = 0; i < 5; i++) {
let newChild = document.createElement('div');
newChild.classList.add('a');
if (lastAppended == null) {
parent.appendChild(newChild);
} else {
lastAppended.appendChild(newChild);
}
lastAppended = newChild;
}
}

after a little styling modifications
https://code.sololearn.com/WirdxeJ4v3zR/?ref=app

Answer 2

This is my try

https://code.sololearn.com/W8sAvH30WtC7/?ref=app

Answer 3

Cloning Alternative

https://code.sololearn.com/W15a20Xc6tq7/?ref=app

Answer 4

O, wow_
Thanks you, all.