Appendchild JavaScript Add a Node to Your HTML with document.appendChild

#javascript #browser #tutorial #dom

If you would prefer to watch this post, you can do so with this community resource lesson on egghead.io

Given the current state of our HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Select an Element with document.querySelector</title>
  </head>
  <body>
    <ul id="movies">
      <li id="movie-1">Peanut Butter Falcon</li>
      <li id="movie-2">Knives Out</li>
    </ul>
  </body>
</html>

To add a movie to this list, we will need to first get the surrounding parent ul node from the document.

const moviesElem = document.getElementById('movies')

Now we need to actually create the element that we want to append to this list.

const uncutGems = document.createElement('li')

uncutGems.textContent = 'Uncut Gems'

We've created an element but it is not actually been added to our HTML. To do so we will call moviesElem.appendChild(uncutGems)

In the browser, you will see that our movie has been added to our list.

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <title>Select an Element with document.querySelector</title>
  </head>
  <body>
    <ul id="movies">
      <li id="movie-1">Peanut Butter Falcon</li>
      <li id="movie-2">Knives Out</li>
    </ul>

    <script>
      const moviesElem = document.getElementById('movies')
      const uncutGems = document.createElement('li')
      uncutGems.textContent = 'Uncut Gems'
      moviesElem.appendChild(uncutGems)
    </script>
  </body>
</html>

We don't want to hard code adding a movie in this script though. Lets create a button that will add a list element when we click it.

<body>
  <ul id="movies">
    <li id="movie-1">Peanut Butter Falcon</li>
    <li id="movie-2">Knives Out</li>
  </ul>

  <button>Add Uncut Gems</button>
</body>

Now we can create a function in our script tag. We'll move the code we currently have into the body of that function.

<script>
  const addMovie = () => {
    const moviesElem = document.getElementById('movies')
    const uncutGems = document.createElement('li')
    uncutGems.textContent = 'Uncut Gems'
    moviesElem.appendChild(uncutGems)
  }
</script>

Now we have to tell the browser to run our function anytime a user clicks our button. We do this by adding an onclick attribute to our button element.

<button onclick="addMovie()">Add Uncut Gems</button>

The other way to do this is to add an onclick attribute through our javascript. We would have to grab our button and and assign our function to onclick directly (If you added the onclick attribute to you button in the html, you will want to remove it before trying this way).

<body>
  <ul id="movies">
    <li id="movie-1">Peanut Butter Falcon</li>
    <li id="movie-2">Knives Out</li>
  </ul>

  <button>Add Uncut Gems</button>
  <script>
    const addMovieButton = document.querySelector('button')
    addMovieButton.onclick = () => {
      const moviesElem = document.getElementById('movies')
      const uncutGems = document.createElement('li')
      uncutGems.textContent = 'Uncut Gems'
      moviesElem.appendChild(uncutGems)
    }
  </script>
</body>