[ANSWERED] javascript – JS DOM order issue

Question 1

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>

Question 2

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

Bollate

[ANSWERED] javascript – JS DOM order issue

By

Solution 1 :

Problem :

Comments

Comment posted by Надиль Каримов

Comment posted by Надиль Каримов

Comment posted by Rayon

Comment posted by AlexD

Comment posted by Rayon

By

Related Post

[ANSWERED] html – Hidden Div Text Reappears?

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate