javascript - innerHTML 的执行流程

Question

为了更好地理解我的问题，这里有一个简短的例子，我将以下内容作为我的 HTML，

<div id="parent">
</div>

这是我在页面加载时调用的 JavaScript 函数，

var parent = document.getElementById("parent");
    function myFun(parent){
                parent.innerHTML += "<ul>";
                parent.innerHTML += "<li>Hello</li>";
                parent.innerHTML += "</ul>";
            }

我希望收到如下输出，

<div id="parent">
   <ul>
      <li>Hello</li>
   </ul>
</div>

但是我收到的是以下输出，

<div id="parent">
       <ul></ul>
          <li>Hello</li>

    </div>

如您所见，“ul”标签未包含“li”标签。我知道我可以使用 appendChild 来解决我的问题，但我真的很好奇为什么会这样。有什么想法吗？？

提前致谢。

Answer 1

如果您停止添加 </ul>，也会出现同样的结果。完全。 <ul>当您第一次附加到 innerHTML 时标签关闭保持代码有效。如果您将字符串组装为一个变量并附加一次，它将起作用:

var tmp = "<ul>";
tmp += "<li>Hello</li>";
tmp += "</ul>";
parent.innerHTML = tmp;