Case I: Working

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

Output:

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

Case II: Not working

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

Output:

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

Why in case 2 their is no surrounding div?

有帮助吗?

解决方案

In the second snippet you would want to use the parentNode property

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
);

your second snippet evaluates to basically doing this

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

using the parentNode evaluates to doing this

var textNode = k.appendChild(document.createTextNode("inner1"));
var k2 = textNode.parentNode;
//k === k2
t1.appendChild(k2);
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top