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>

正如你所看到的那样，＆＃34; ul＆＃34;标签没有附上＆＃34; li＆＃34;标签。我知道我可以使用appendChild来解决我的问题，但我真的很好奇为什么会这样。任何想法??

提前致谢。

Answer 1

如果您完全停止添加</ul>，也会发生同样的结果。当您第一次附加到<ul>以保持代码有效时，innerHTML标记已关闭。如果您将字符串组合为变量并将其附加一次，它将起作用：

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

Answer 2

我猜你添加字符串的'{ul}'让浏览器自动添加'{/ ul}'，这样语句才有意义。然后下一行添加了'{li} hello {/ li}'，这很好。之后浏览器拒绝了“{/ ul}”，因为ul已经关闭，因此毫无意义。

Answer 3

我做了一些实验，这就是我提出的，当我写parent.innerHTML += "<ul>";时，浏览器检测到没有结束标记，因此添加＆＃34;＆＃34;作为纠错。当浏览器出现'parent.innerHTML += </ul>'时，它看到没有起始标记，因此忽略它。

Answer 4

如果您尝试以下代码，则不会发现该问题。

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

            parent.innerHTML += html ;
        }

由于浏览器对html的宽容性，当你只添加＆lt; ul＆gt;时对于innerHTML，它正在添加＆lt; ul＆gt;＆lt; / ul＆gt; （换句话说，一个有效的元素）。然后你要添加＆lt; li＆gt; Hello＆lt; / li＆gt;，这没关系。最后的＆lt; / ul＆gt;被浏览器忽略，因为它看不到需要。

innerHTML的执行流程

4 个答案: