Search code examples
javascriptappendchild

appendChild not appending textNode parent


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?


Solution

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