Мы будем использовать метод 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 Написано и разработано г-ном Роман Юрченко