DEV Community: Roman Yurchenko

Creating HTML Elements using insertAdjacentHTML() method in JavaScript

Roman Yurchenko — Sun, 01 Jan 2023 22:24:36 +0000

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.

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:

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:

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

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

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

We can easily use the insertAdjacentHTML() method for creating and adding HTML elements dynamically by event. 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);

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:

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

Binding Event Listeners to Dynamically Created Elements in JavaScript

Roman Yurchenko — Thu, 15 Dec 2022 22:35:41 +0000

We have the existing <li> HTML elements that contain "programming languages" and buttons "delete" and we can remove any programming language clicking the "delete" button.

We can add dynamically created <li> elements with "Frameworks" and buttons "delete" by "click" or "keypress" events using input value.

To create and add new <li> HTML elemenets dynamically the insertAdjacentHTML() JavaScript method was used:


const button = document.querySelector(".button-add-framework");

const input = document.querySelector("#input-value");

const ul = document.querySelector("ul");

/*Add an element at the beginning of the list clicking "Add Framework" button*/

button.addEventListener("click", function () {
  if (input.value !== "") {
    const li = `<li class = "element-list">${input.value}<span>framework</span><button class="btn-delete">delete</button></li>`;
    ul.insertAdjacentHTML("afterBegin", li);
    input.value = "";
  }
});

/*Add an element at the beginning of the list pressing key "Enter"*/

input.addEventListener("keypress", function (e) {
  if (e.key === "Enter" && input.value !== "") {
    const li = `<li class = "element-list">${input.value}<span>framework</span><button class="btn-delete">delete</button></li>`;
    ul.insertAdjacentHTML("afterBegin", li);

    input.value = "";
  }
});

Now, We can add Frameworks to our list by entering any Framework and clicking "Add Framework" button:

We want to remove added <li> element by clicking “delete” button. The problem is that an ordinary code will affect only <li> elements with “programming languages” but the Dynamically Created Elements with “frameworks” will not be affected:

const deleteButtons = document.querySelectorAll(".btn-delete");

deleteButtons.forEach((delBtn) => {
 delBtn.addEventListener("click", () => {
   delBtn.parentElement.remove();
  });
});

So, It means that we can delete only “programming languages” but not added “frameworks” by clicking “delete” button !

To solve this problem and make our new added <li> elements (with “frameworks” and “delete” buttons) clickable, we use "Event Delegation" pattern!

It means that we are adding handling of the event not directly to our <button> “delete” element but to the <ul> element that contains all <li> elements and stands above them in DOM structure. So, We are “catching” an event triggered in our <ul> element that matches our selected “delete” <button> element:

const ul = document.querySelector("ul");

ul.addEventListener("click", (event) => {
  if (event.target.classList.contains("btn-delete")) {
    event.target.parentElement.remove();
  }
});

We used the classList property and the contains() method to "catch" the "click" event on the HTML element that we need: event.target.classList.contains ("btn-delete") !

CONCLUSION:

Using "Event Delegation" pattern we can provide an element we need with the event handler, based on the event attached to its parent element or to the element standing higher in the DOM. It allows us to include all Dynamically Created Elements to the list of the event handlers that we need !

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

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

2022 Written and Developed by Mr. Roman Yurchenko