Search⌘ K
Home
Courses
Web Development: Unraveling HTML, CSS, and JavaScript

Adding New Child Elements to the Document

In this lesson, we will add new child elements to our document tree. Let's begin!

We'll cover the following...

After you have grabbed a document element, you can add child elements to it with the appendChild() and insertBefore() methods.

The first method appends a new child to the end of the list of exiting children

The second method allows specifying the position of insertion. The Listing below demonstrates using them.

Listing: Using appendChild(), and insertBefore() methods

<!DOCTYPE html>
<html>
<head>
  <title>Add new elements</title>
</head>
<body>
  <p>These are items:</p>
  <ol id="list" start="1">
    <li id="item1">Item #1</li>
    <li id="item2">Item #2</li>
    <li id="item3">Item #3</li>
  </ol>
  <button onclick="addToTop()">
    Add new item to top
  </button>
  <br />
  <button onclick="addAfterFirst()">
    Add new item after the first child
  </button>
  <br />
  <button onclick="addToBottom()">
    Add new item to bottom
  </button>
  <script>
    function addToTop() {
      var list = document.getElementById('list');
      var firstItem = list.firstElementChild;
      var newNode = createNewNode("addToTop");
      list.insertBefore(newNode, firstItem);
    }

    function addAfterFirst() {
      var list = document.getElementById('list');
      var firstItem = list.firstElementChild;
      var secondItem = firstItem.nextElementSibling;
      var newNode = createNewNode("addAfterFirst");
      list.insertBefore(newNode, secondItem);
    }

    function addToBottom() {
      var list = document.getElementById('list');
      var newNode = createNewNode("addToBottom");
      list.appendChild(newNode);
    }

    function createNewNode(message) {
      var item = document.getElementById('list');
      var count = item.childElementCount;
      var newNode = document.createElement('li');
      newNode.textContent =
        "item #" + (count + 1) + " ("
        + message + ")";
      return newNode;
    }
  </script>
</body>
</html>

The ...