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

Adding New Child Elements to the Document

Explore how to add new child elements to the HTML document using JavaScript. Understand creating elements with createElement, then inserting them with appendChild or insertBefore to control element positioning dynamically within the DOM structure.

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