Append an element to the DOM as nth child using insertBefore
Last updated: March 24, 2022.
Sometimes, you may come across a situation where you want to use JavaScript to append an element to the DOM as a middle child.
For example, in the following HTML code, there are six paragraphs contained within the <div id = "article-body">
element:
<article id="article"> <h1 id="title">Content</h1> <div id="article-body"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> </div> </article>
Let’s say we want to insert an image before the fourth paragraph.
insertBefore
For this, we can apply the insertBefore method to the parent element. We then specify the element we want to insert to the DOM as a first argument; and as a second argument, the element it should be inserted before:
parentElement.insertBefore(newElement, existingElement)
Applied to the example above, we can insert an image before the fourth paragraph as follows:
// Create an element to be inserted const img = document.createElement('img'); img.src = "http://unsplash.it/600/100"; // Select parent element and element to insert new element before articleBody = document.getElementById('article-body'); para = articleBody.querySelectorAll('p')[3]; // Apply insertBefore to parent, specify new element as first argument the second as the one to insert before articleBody.insertBefore(img, para); // Result: inserts before paragraph four

Inventing an insertAfter
Unfortunately, an insertAfter method is not supported. But if you do want to insert a new element after an existing element, it is possible with a minor workaround: apply the nextSibling method when selecting amongst the children of the parent. Then, when insertBefore is used, it will the new element after the element to which nextSibling was applied:
// Create an element to be inserted const img = document.createElement('img'); img.src = "http://unsplash.it/600/100"; // Select parent element and element to insert new element after and apply nextSibling articleBody = document.getElementById('article-body'); para = articleBody.querySelectorAll('p')[3].nextSibling; // Apply insertBefore to parent, specify new element as first argument the second as the one to insert after articleBody.insertBefore(img, para); // Result: inserts after paragraph four

Don't forget about append and prepend
Bear in mind that insertBefore is not necessary if you want to insert an element as the first or last child: for this, just apply prepend (first child) or append (last child) to the parent, passing in the new element:
// Create an element to be inserted const img = document.createElement('img'); img.src = "http://unsplash.it/600/100"; // Select parent element articleBody = document.getElementById('article-body'); // Apply prepend or append to insert new element as first or last child: articleBody.prepend(img); // Result: image is inserted as first child