JS DOM order issue

Question

I ran into a weird issue I can't seem to figure out. I have this basic JS code

var myList = document.getElementById("my-list") myList.innerHTML += "<li>3</li>" document.body.innerHTML += "<p id='paragraph'>V School rocks!</p>" document.getElementById("paragraph").style.textAlign = "center" var a = document.createElement("li") a.textContent = "element" console.log(myList) myList.append(a)

and this html

<!DOCTYPE html> <html> <head> </head> <body> <html> <head> </head> <body> <ul id="my-list"> <li>0</li> <li>1</li> <li>2</li> </ul> <script src="demo2.js"></script> </body> </html> </body> </html>

the last line of JS code does not append my element into the list although if I console log the list it shows the element as existing there.

In order to make this code work properly, I have make one of the following updates:

remove the 4th and 5th lines of code.
redeclare the myList variable below the 4th and 5th lines of code.

Any idea why this happens?

Thanks in advance

Your html seems to be invalid. there should be exactly two HTML two HEAD and two BODY tags(opening and closing) : <html> <head> </head> <body> <ul id="my-list"> <li>0</li> <li>1</li> <li>2</li> </ul> <script src="demo2.js"></script> </body> </html> — Надиль Каримов
– Надиль Каримов, Commented Mar 19, 2020 at 9:44

Rayon · Accepted Answer · 2020-03-19 10:04:12Z

document.body.innerHTML += breaks the reference of variable myList as += gets the HTML from the DOM and reinserted entire HTML again.

Note: Use Node.appendChild() not .append, The Node.appendChild() method adds a node to the end of the list of children of a specified parent node.

A simple hack would be to redefine the variable "myList" as initially declared variable has lost the reference(Not recommended).

var myList = document.getElementById("my-list"); myList.innerHTML += "<li>3</li>" document.body.innerHTML += "<p id='paragraph'>V School rocks!</p>"; document.getElementById("paragraph").style.textAlign = "center"; myList = document.getElementById("my-list");//this line will access the element again. var a = document.createElement("li") a.textContent = "element" myList.appendChild(a)

<ul id="my-list"> <li>0</li> <li>1</li> <li>2</li> </ul>

I would not recommend innerHTML += approach, use Element.appendChild where you can use an earlier defined variable and it does not disturb the entire DOM tree.

var myList = document.getElementById("my-list"); var liElem = document.createElement('li'); liElem.textContent = "3"; myList.appendChild(liElem); var pElem = document.createElement('p'); pElem.id = "paragraph"; pElem.textContent = "V School rocks!"; document.body.appendChild(pElem); document.getElementById("paragraph").style.textAlign = "center"; var a = document.createElement("li") a.textContent = "element" myList.appendChild(a)

<ul id="my-list"> <li>0</li> <li>1</li> <li>2</li> </ul>

document.body.innerHTML += breaks the reference? really?? Is it true only for body, or for any tag? Didn't know that
@НадильКаримов - innerHTML is equivalent to get entire HTML, update it and reinsert it again
@НадильКаримов Thanks a lot for your reply. I understand :). What I wierd tho, is that if I console.log the myList variable after the innerHTML it still has it's content even if I don't reassign it.

Collectives™ on Stack Overflow

JS DOM order issue

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related