Inserting elements and text-data to the DOM using JavaScript
Last updated: September 27, 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 itemA 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
- OpenJavaScript: Append an element to the DOM as nth child using insertBefore
- MDN Web Docs: Document Object Model (DOM)
