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=""></script>
  'use strict';
  window.onload = () => {
    let dir = console.dir;
    let log = console.log;
    $('body').click(() => $('h1').show('slow', () => log('called')));

  function appendDiv() {

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


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


Source: stackoverflow