Could someone explain the issue with this function chain? Not getting intended functionality

I am trying to understand JS and jQuery and have some code to append an element to the DOM. I try and create a text node and append it to the element node and then append that to the first div tag, all in one statement. I understand this is probably bad practice but I just wanted to see if it were possible. It seems like it should work because createElement() returns the new element object and I call the appendChild() on that object which appends the returned object from createTextNode(). Yet what actually occurs is the text node gets appended, but not as a div. It seems it bypasses the createElement function for some reason. Could someone explain why please? I even put it in brackets to make sure it executes first to no avail.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  'use strict';
  window.onload = () => {
    let dir = console.dir;
    let log = console.log;
    $('h1').hide();
    $('body').click(() => $('h1').show('slow', () => log('called')));
  };

  function appendDiv() {
    document.getElementsByTagName('div')[0]
      .appendChild((document.createElement('div'))
        .appendChild(document.createTextNode('AppendedDiv')));
  }
</script>
</head>

<body>
  <h1 id="heading1" onclick="appendDiv();">JavaScript and jQuery Practice</h1>
  <p>Practice using JavaScript and jQuery here!</p>
  <div>DIV</div>
  <div>DIV</div>
  <div>DIV</div>
  <div>DIV</div>

JavaScript
​x
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  'use strict';
  window.onload = () => {
    let dir = console.dir;
    let log = console.log;
    $('h1').hide();
    $('body').click(() => $('h1').show('slow', () => log('called')));
  };
​
  function appendDiv() {
    document.getElementsByTagName('div')[0]
      .appendChild((document.createElement('div'))
        .appendChild(document.createTextNode('AppendedDiv')));
  }
</script>
</head>
​
<body>
  <h1 id="heading1" onclick="appendDiv();">JavaScript and jQuery Practice</h1>
  <p>Practice using JavaScript and jQuery here!</p>
  <div>DIV</div>
  <div>DIV</div>
  <div>DIV</div>
  <div>DIV</div>

Answer

appendChild returns the appended child–so calling elem.appendChild(div.appendChild(text)) would actually append text to elem and not a div with child text like you intended. You should just separate it out:

function appendDiv() {
  const child = document.createElement('div');
  child.appendChild(document.createTextNode('AppendedDiv'));

  document.getElementsByTagName('div')[0]
    .appendChild(child);
}

JavaScript
 
function appendDiv() {
  const child = document.createElement('div');
  child.appendChild(document.createTextNode('AppendedDiv'));
​
  document.getElementsByTagName('div')[0]
    .appendChild(child);
}
​

Advertisement

Answer