Question

我有这个HTML：

<ul id="ulref">
    <li>Joe</li>
    <li>Fred</li>
    <li>Steve</li>
</ul>

和这个JS：

ipDOM=document.getElementById("ulref");
x = document.createElement('LI');
y = document.createTextNode("hello");
z = x.appendChild(y);
ipDOM.appendChild(z);

所以，＆＃34;你好＆＃34;应该是新LI的子TextNode，我想，但是LI和TextNode都显示为父UL的直接子节点（兄弟节点）。但是，如果我将JS改为：

ipDOM=document.getElementById("ulref");
x = document.createElement('LI');
y = document.createTextNode("hello");
ipDOM.appendChild(x).appendChild(y);

并且错过了z阶段，LI是孩子的UL，而Textnode是LI的孩子，正如我想要的那样。

为什么第一种方式不像我预期的那样工作？我正在构建LI和子TextNode然后将该配对放入ipDOM，不是吗？

Answer 1

Node.appendChild返回附加到节点的子节点因此，在将文本节点附加到li之后，您将其附加到ul（将其从li中删除）

ipDOM=document.getElementById("ulref");
x = document.createElement('LI');
y = document.createTextNode("hello");
x.appendChild(y);  // append the text node to the li
ipDOM.appendChild(x); //append the li to the ul

appendChild没有按预期工作

1 个答案: