DEV Community

Ian Jones
Ian Jones

Posted on

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

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>
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
mzaini30 profile image
Zen

Why you're not use series tag for help us crawl your articles in one concept?

Like this:

Code:

Alt Text

Collapse
 
theianjones profile image
Ian Jones

I didn't know how to do this, thanks for sharing!

Collapse
 
mzaini30 profile image
Zen

You're welcome