Question

案例I：工作

var k = document.createElement("div"),
t1 = document.getElementById("test1");
k.appendChild(document.createTextNode("inner1"))
t1.appendChild(k);

输出：

<div id="test1">
    <div>inner1</div>
</div>

案例II：无法正常工作

var k = document.createElement("div"),
t1 = document.getElementById("test1");
t1.appendChild(k.appendChild(document.createTextNode("inner1")));

输出：

<div id="test1">inner1</div>

为什么在案例2中他们没有围绕div？

Answer 1

在第二个代码段中，您需要使用parentNode属性

var k = document.createElement("div"),
t1 = document.getElementById("test1");
t1.appendChild(
  k.appendChild(
     document.createTextNode("inner1")
  ) //will return the textnode and not the div, 
    //so we need to get parentNode which will be the div
  .parentNode
);

你的第二个代码段评估基本上是这样做

var textNode = k.appendChild(document.createTextNode("inner1"));
t1.appendChild(textNode);

使用parentNode计算执行此操作

var textNode = k.appendChild(document.createTextNode("inner1"));
var k2 = textNode.parentNode;
//k === k2
t1.appendChild(k2);

appendChild不附加textNode父级

1 个答案: