JS DOM元素追加异常求助：append操作未生效的原因？

这个问题的核心在于**innerHTML +=会彻底重建body内的DOM树**，导致你之前保存的DOM元素引用失效了，具体拆解如下：

问题发生的完整流程 #

1. 你一开始通过var myList = document.getElementById("my-list")获取了页面上的<ul>元素，此时myList指向的是当前DOM树中活跃的真实节点，页面上的列表就是它。
2. 当执行document.body.innerHTML += "<p id='paragraph'>V School rocks!</p>"时，浏览器的操作逻辑是：
   • 把body当前所有内容转换成HTML字符串
   • 拼接上新的<p>字符串
   • 将拼接后的完整字符串重新赋值给body.innerHTML
   • 关键来了：浏览器会销毁原来body内的所有DOM节点（包括你刚才拿到的<ul>），然后从头解析新的HTML字符串，创建一套全新的DOM节点树。
3. 这时候myList变量依然指向那个已经被销毁的旧<ul>节点——它还存在于内存中，但已经脱离了页面的DOM树，不再是你能看到的那个列表了。
4. 所以你执行myList.append(a)时，确实是把新<li>添加到了这个旧节点里，console.log(myList)能看到这个内存中的节点有新元素（因为控制台会保留对象引用，显示最新状态），但这个节点根本不在页面上，自然看不到效果。

两种修复方式的原理 #

• 移除第4、5行代码：避免触发body.innerHTML的重新赋值，原来的<ul>节点始终留在DOM树里，myList的引用一直有效，追加操作自然能在页面上显示。
• 在第4、5行后重新声明myList：重新调用var myList = document.getElementById("my-list")，此时会从新创建的DOM树中获取当前活跃的<ul>节点，myList现在指向的是页面上真实存在的列表，追加操作就能生效了。

另外提个小细节：你的HTML代码嵌套了两层<html>和<body>标签，这不符合HTML规范，浏览器会自动修正，但建议改成标准的单一层级结构，避免潜在的解析问题。

内容的提问来源于stack exchange，提问作者AlexD