Add an HTML Element with JavaScript insertAdjacentHTML

In this article, you will learn how to add an HTML element with JavaScript insertAdjacentHTML.

What is insertAdjacentHTML?

The insertAdjacentHTML is a property that can parse the HTML or XML specified in the argument and insert the result as a node in the DOM tree.
There is innerHTML as a property that behaves similarly, but unlike innerHTML, it does not destroy existing elements when adding HTML elements.
Since the position to insert the HTML element can be easily specified by the argument, it is possible to add the HTML element at the target location.

How to use insertAdjacentHTML

The insertAdjacentHTML is described as follows:

element.insertAdjacentHTML(position, text);

position

In “position”, specify the position to insert in the specified element. The following values ​​can be specified for the argument.

beforebegin	Insert just before the specified element
afterbegin	Insert before the first child element in the specified element
beforeend	Insert after the last child element in the specified element
afterend	Insert after the specified element

text

For “text”, specify a character string that can be inserted as HTML or XML.

Add a new element

Add a new element to the HTML below.

<div id="box">
  <h1>title</h1>
</div>

beforebegin

let element = document.getElementById('box');
element.insertAdjacentHTML('beforebegin', '<p>test</p>');

//result
//<p>test</p>
//<div id="box">
//  <h1>title</h1>
//</div>

afterbegin

let element = document.getElementById('box');
element.insertAdjacentHTML('afterbegin', '<p>test</p>');

//result
//<div id="box">
//  <p>test</p>
//  <h1>title</h1>
//</div>

beforeend

let element = document.getElementById('box');
element.insertAdjacentHTML('beforeend', '<p>test</p>');

//result
//<div id="box">
//  <h1>title</h1>
//  <p>test</p>
//</div>

afterend

let element = document.getElementById('box');
element.insertAdjacentHTML('afterend', '<p>test</p>');

//result
//<div id="box">
//  <h1>title</h1>
//</div>
//<p>test</p>