Creating HTML Elements using insertAdjacentHTML() method in JavaScript
Published: 2023-01-01 22:24:36

We wil use the **insertAdjacentHTML()** method to create HTML elements and add them to the DOM.

          

**element.insertAdjacentHTML(position, stringHtml)**:

The **element** is the existing HTML element, relative to which we are adding the new HTML element that we create.

The **position** parameter indicates where exactly we insert the new created HTML.

The **stringHtml** paramater is this new HTML element that we create. The type of stringHtml parameter is a string which contains HTML code.

For example, we can use the **insertAdjacentHTML()** method to add new `<li>` elements to the parent `<ul>` HTML element that already contains three existing `<li>` elements.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unx0ynhl50k2vm4sxb4y.jpg)


We create the followig JavaScript code to do it:

```
const ul = document.querySelector(".ul-insert- 
  html-example");

const li = `<li>element added by 
  <span>JavaScript</span></li>`;

ul.insertAdjacentHTML("afterbegin", li);
```

And we have the result:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54clywgimipdx8s73ant.jpg)

We can use the following parameters to insert the created HTML element:

"**afterbegin**", "**beforeend**", "**beforebegin**", "**afterend**".

"**afterbegin**" - "responses" for inserting created HTML element before the first child element of the parent element:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7azigu08dgp027s9letv.jpg)

"**beforeend**" - "responses" for inserting created HTML element after the last child element of the parent element:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7c250trna62qus344vq.jpg)

"**beforebegin**" - "responses" for inserting created HTML element before its parent element:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfm5c5is7141saz0tlbl.jpg)

"**afterend**" -"responses" for inserting created HTML element after its parent element:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpr6fv1w8r2obpqhitw4.jpg)

We can easily use the **insertAdjacentHTML()** method for creating and [adding HTML elements dynamically by event](https://romannet77.github.io/js-event-delegation/). For example, we want to add new `<li>` element to the parent `<ul>` element by the click `<button>` event.

First of all, let's create the button "Add `<li>` element" using the the **insertAdjacentHTML()** method !

```
const buttonHtmlElement = 
`<button class="button-add-html-element">Add <li> 
  element</button>`;

const ulParentEl = 
 document.querySelector("ul.parent-element-for- 
 button");

ulParentEl.insertAdjacentHTML("beforebegin", 
 buttonHtmlElement);
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0d0zjxf63txlaqsovzq.jpg)

Now we can attach an event handler to the created `<button>` element:


```
const button = document.querySelector("button");

const liAddedByClick = `<li>added by click
  <span> class="red-color-text" (JavaScript)</span></li>`;

button.addEventListener("click", () => {
   ulParentEl.insertAdjacentHTML( "afterbegin", liAddedByClick);
  }
);
```

So we can add `<li>` elements by clicking the created button:
 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zkgf0m11u2k0hvhvevo.jpg)
   

**CONCLUSION:**

All that we need to create and add the HTML element to the DOM, using the JavaScript **insertAdjacentHTML()** method, is:

1) **Create the HTML element that we need**: 

```
const li = `<li>element added by <span>JavaScript</span></li>;`
```

2) **Choose its parent HTML element**: 

```
const ul = document.querySelector(".ul-insert-html-example");

```
3) **Indicate the place where we want to store it**: 

```
ul.insertAdjacentHTML("afterbegin", li);
```

And that's it!  And that is the simplicity and the beauty of the **insertAdjacentHTML()** method !



https://js-event-delegation.netlify.app/

https://romannet77.github.io/js-event-delegation/

2022 Written and Developed by Mr. [Roman Yurchenko](https://www.linkedin.com/in/roman-yurchenko-89630923b/)