JS DOM订购问题

问题描述 投票:0回答:1

我遇到了一个奇怪的问题,我似乎无法弄清楚。我有这个基本的JS代码

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)

和此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>

JS代码的最后一行没有将我的元素添加到列表中,尽管如果我在控制台日志中记录了列表,则该元素显示在那里。”>

为了使此代码正常工作,我进行了以下更新之一:

  1. 删除代码的第4行和第5行。
  2. 在代码的第4行和第5行下方声明myList变量。
  3. 知道为什么会这样吗?

提前感谢

我遇到了一个奇怪的问题,我似乎无法弄清楚。我有这个基本的JS代码var myList = document.getElementById(“ my-list”)myList.innerHTML + =“

  • 3” document.body.innerHTML + = ...
  • javascript html
    1个回答
    2
    投票
    [document.body.innerHTML +=中断了对变量myList的引用,因为+=从DOM获取HTML并再次重新插入整个HTML。
    © www.soinside.com 2019 - 2024. All rights reserved.