Мы будем использовать метод insertAdjacentHTML() для создания элементов HTML и добавления их в DOM.

element.insertAdjacentHTML(position, stringHtml):

элемент — это существующий элемент HTML, относительно которого мы добавляем новый элемент HTML, который мы создаем.

Параметр position указывает, куда именно мы вставляем новый созданный HTML.

Параметр stringHtml — это новый HTML-элемент, который мы создаем. Тип параметра stringHtml — это строка, содержащая HTML-код.

Например, мы можем использовать метод insertAdjacentHTML() для добавления новых элементов <li> к родительскому элементу HTML <ul>, который уже содержит три существующих элемента <li>.

Для этого мы создаем следующий код JavaScript:

const ul = document.querySelector(".ul-insert-html-example"); 
 
const li = `<li>element added by <span>JavaScript</span></li>`;
  
ul.insertAdjacentHTML("afterbegin", li);

Мы можем использовать следующие параметры для вставки созданного элемента HTML:

"после начала", "до конца", "до начала", "после окончания".

«afterbegin» — «ответы» на вставку созданного HTML-элемента перед первым дочерним элементом родительского элемента:

«beforeend» — «ответы» на вставку созданного HTML-элемента после последнего дочернего элемента родительского элемента:

«beforebegin» — «ответы» на вставку созданного HTML-элемента перед его родительским элементом:

«afterend» — «ответы» на вставку созданного HTML-элемента после его родительского элемента:

Мы можем легко использовать метод insertAdjacentHTML() для создания и динамического добавления элементов HTML по событию. Например, мы хотим добавить новый элемент <li> к родительскому элементу <ul> по событию click <button>.

Прежде всего, давайте создадим кнопку «Добавить <li> элемент» с помощью метода insertAdjacentHTML()!

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);

Теперь мы можем прикрепить обработчик события к созданному элементу <button>:

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);
  }
);

Таким образом, мы можем добавить элементы ‹li›, нажав созданную кнопку:

ЗАКЛЮЧЕНИЕ:

Все, что нам нужно для создания и добавления HTML-элемента в DOM с помощью JavaScript-метода insertAdjacentHTML(), это:

1) Создайте нужный нам элемент HTML:

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

2) Выберите его родительский элемент HTML:

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

3) Указываем место, где мы хотим его сохранить:

ul.insertAdjacentHTML("afterbegin", li);

Вот и все! И в этом простота и красота метода insertAdjacentHTML()!

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

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

2022 Написано и разработано г-ном Роман Юрченко