Add a Node to Your HTML with document.appendChild
Tags: javascript, browser, tutorial, dom
Published: 2020-02-21 14:34:30

---
title: Add a Node to Your HTML with document.appendChild
published: true
description: Learn how to add an HTML element to your page!
tags: #javascript, #browser, #tutorial, #dom
series: Get Started with JavaScript in the DOM
---

If you would prefer to watch this post, you can do so with this [community resource lesson on egghead.io](https://egghead.io/lessons/javascript-add-a-node-to-your-html-with-document-appendchild?pl=introduction-to-client-side-web-apis-72d0&af=ay44db)

Given the current state of our HTML:

```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.

```js
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.

```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>

    <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.

```html
<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.

```html
<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.

```html
<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).

```html
<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>
```