Inserting elements and text-data to the DOM using JavaScript

Reading Time: 4 minutes 🕑

Last updated: July 13, 2022.

JavaScript offers various methods for inserting elements and content to a web page.

The type of method to choose when inserting new content into the DOM depends on where it should be inserted and the type of content (an element or text-based data).

Table of contents

At bottom of page or element

append()

The append() method will insert an element or string (or a ‘stringifiable’ value like a number) as the final content in the element it is applied to:

document.body.append("Newly inserted content"); // Inserts text node at end of page

const newDiv = document.createElement('div');
newDiv.id = "newDiv";
document.body.append(newDiv); // Inserts div element after previously inserted text node

newDiv.append("New text inside div"); // Final text node in div
newDiv.append("Even newer text"); // New final text node in div

// DOM output:
// Newly inserted content
// <div id="newDiv">
//   New text inside div
//   Even newer text
// </div>

It is also possible to append multiple elements and text values in one go:

const para = document.createElement('p');
para.textContent = "This is a paragraph element";

const txt = "This is a string";

const num = 123;

document.body.append(para, txt, num);
// Final page items are para, txt and then num

appendChild()

appendChild() also inserts new content last, but only accepts HTML elements and will only insert a single element in one use.

Note that no error is thrown when trying to insert more than one element – additional content is simply ignored.

const firstPara = document.createElement('p');
firstPara.textContent = "This is a paragraph element";

const nextPara = document.createElement('p');
nextPara.textContent = "This is another paragraph element";

// Correct usage:
document.body.appendChild(firstPara);

// Usages to avoid:
document.body.appendChild(firstPara, nextPara); // firstPara appended, nextPara ignored
document.body.appendChild(firstPara, "blah blah blah"); // firstPara appended, string ignored
document.body.appendChild("blah blah blah"); // Uncaught TypeError: Failed to execute 'appendChild' on 'Node'

In general, it is better practice to use appendChild() over append() when you want to insert a single HTML element to the page because it is more likel to catch a content type error.

At top of page or element

prepend()

prepend() is the sister method of append(). It also accepts both elements and text content, as well as multiple in one use.

But with prepend(), content is inserted before any existing content inside the element it is applied to.

const para = document.createElement('p');
para.textContent = "This is a paragraph element";

const txt = "blah blah blah";

document.body.prepend(para, txt); // para and then txt appear before any existing content on page

// DOM output:
// <p>This is a paragraph element</p>
// blah blah blah

In case you were wondering, no prependChild() method exists!

As nth child on page or within element

insertBefore()

The insertBefore() method is ideal for inserting an element between various child elements within a parent element.

insertBefore() is applied to a parent element. It requires two arguments to be passed into it: the new element to insert and the one it should be inserted before.

// Create a parent element and append to the DOM
const parentElement = document.createElement('ul');
document.body.appendChild(parentElement);

// Create children and append to parent
const child1 = document.createElement('li');
const child2 = document.createElement('li');
const child3 = document.createElement('li');

child1.textContent = "I am the first child";
child2.textContent = "I am the middle child";
child3.textContent = "I'm the last child";

parentElement.append(child1, child2, child3);

// DOM output so far:
// <ul>
//   <li>I am the first child</li>
//   <li>I am the middle child</li>
//   <li>I'm the last child</li>
// </ul>

// Now, create a fourth child and insert before child2
const childToInsert = document.createElement('li');
childToInsert.textContent = "I'm the unexpected fourth child";

parentElement.insertBefore(childToInsert, child2);

// Final DOM output:
// <ul>
//   <li>I am the first child</li>
//   <li>I'm the unexpected fourth child</li>
//   <li>I am the middle child</li>
//   <li>I'm the last child</li>
// </ul>

Another way to use insertBefore() is to find the index of an element at a position of interest and specify this index when specifying the element the new one should be inserted before:

<!-- Markup -->
<article id="article">
    <p>para1</p>
    <p>para2</p>
    <p>para3</p>
    <p>para4</p>
</article>

<!-- JavaScript -->
<script>
    // Select article and create new element
    const article = document.getElementById('article');
    const ad = document.createElement('div');
    ad.textContent = "ad-text"

    // Get middle element index
    const middleChildIndex = Math.round((article.children.length)*0.5);
    
    // Insert to DOM before element at an index position:
    article.insertBefore(ad, article.children[middleChildIndex]);
   
   // DOM output:
   // <article id="article">
   //    <p>para1</p>
   //    <p>para2</p>
   //    <p>ad-text</p>
   //    <p>para3</p>
   //    <p>para4</p>
   // </article>
</script>

Note that insertBefore() can only be used to insert a new element to the DOM.

Inserting after a child element

There is no insertAfter() method. But you can adapt insertBefore() to behave this way by using nextSibling when specifying the element to insert the new one after:

<!-- Markup -->
<ul id="toc">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>
<!-- JavaScript -->
<script>
    const toc = document.getElementById('toc');
    const newItem = document.createElement('li');
    newItem.textContent = "A new item";
    // Inserts after second item
    toc.insertBefore(newItem, toc.children[1].nextSibling);
    
    // DOM output:
    // <ul id="toc">
    //     <li>First item</li>
    //     <li>Second item
  • A new item</li> // <li>Third item</li> // </ul> </script>
  • Insert next to or inside an element

    insertAdjacentHTML()

    The insertAdjacentHTML() writes content as HTML nearby or inside an element it is called on.

    As a first argument, it accepts one of four string values: 'beforebegin', 'afterbegin', 'beforeend' and 'afterend'.

    <!-- beforebegin -->
    <div>
      <!-- afterbegin -->
      Content
      <!-- beforeend -->
    </div>
    <!-- afterend -->
    

    The second argument can be any valid HTML to write to the DOM:

    // Create div with inner content
    const content = document.createElement('article');
    content.textContent = "I'm the content inside the div";
    
    // Create a table of content string
    const toc = "
      Table of contents
    • First item
    "; // Write toc as HTML before content in the div content.insertAdjacentHTML('afterbegin', toc); document.body.append(content); // DOM output: // <article> // <ul>Table of contents // <li>First item</li> // </ul> // I'm the content inside the div // </article>

    insertAdjacentElement()

    This method works in the same way as insertAdjacentHTML() except it inserts a HTML element close to or inside the element it is applied to:

    const content = document.createElement('article');
    content.textContent = "I'm the content inside the div";
    
    const heading = document.createElement('h1');
    heading.textContent = "I am the title of the article";
    
    content.insertAdjacentElement('afterbegin', heading);
    
    document.body.append(content);
    
    // DOM output:
    // <article>
    //   <h1>I am the title of the article</h1>
    //   I'm the content inside the div
    // <article>
    

    insertAdjacentText()

    Works in the same way, but accepts a string and writes to the DOM as text:

    const content = document.createElement('article');
    content.textContent = "I'm the content inside the div";
    document.body.append(content);
    
    const thanksForReading = "Thanks for reading!";
    
    content.insertAdjacentText('afterend', thanksForReading);
    
    // DOM output:
    // <article>I'm the content inside the div</article>
    // Thanks for reading!
    

    Related links