What?

Question

Hello guys, I am totally new to this and I did it as a kind of test and there is something I do not understand ... I made this code:
var list = document.getElementById ("list")

var arrayItems = ["item1", "item2", "item3"]

var li = document.createElement ("li")

arrayItems.forEach (item => {

li.textContent = item
console.log (li)
list.appendChild (li)

})
Then I saw and hoped that the console will launch me 3 times the label "li" with the content of the respective tour, that is, first "item1", "item2" and "item3" but no, it launches the label li 3 times but with the content of "item3" only and I do not understand why, it is as if the loop is omitting the console or something like that
Why does this happen ? And well I know that the creation of the li label is outside the loop and maybe this has to do with that xq doing it with the label inside and it happens as expected, but in the end I can't explain why this is with the label outside the loop

Answer 1

Willi The problem is related to referencing the same instance of li.

Try moving the line:

var li = document.createElement("li")

into the arrow function passed into arrayItems.forEach().

In the 1st iteration, the li node is assigned the value "item1", then appended to a parent node.

In the 2nd iteration, the same li node is assigned a new value "item2", then _moved_ from its current parent node to a new parent node, which happens to be the same parent node. So, in effect, the li node will always belong to one parent node and rendered only once.

If the node instance could belong to multiple locations (even within the same parent node), then technically, you would expect the following to be rendered:

* item2
* item2

Here, the same instance would have been rendered twice, both reflecting the value last assigned.

However, since the node is simply relocated to the same parent, it is rendered exactly once showing the most recently assigned value.

Finally, the 3rd iteration changes the value to "item3".

Answer 2

Willi The details of this behavior are clearly stated in the first two paragraphs of this link:

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

I highly recommend making this website your primary resource for understanding expected behaviors of the DOM and various APIs as you encounter things that may not make sense. 😉

Answer 3

Please link your complete code.

Answer 4

The code you linked differs from the one in the description. I couldn't replicate your error.
Also the line endings are missing ; ???

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

Answer 5

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

Answer 6

try it in chrome browser and you will see bro

Answer 7

David Carroll Yes of course Bro but it is supposed that in the first iteration "item1" is assigned to li and exactly then it is passed by console and it is where it should show "item1 no? And likewise with the rest of the elements ... I do not understand very well what you mean by the "node part" which would be this? ... Excuse me if I still do not understand, is that it is a bit complicated however I appreciate your guidance Bro