В этой небольшой статье мы поговорим об очень полезном JavaScript-методе, который можно применить к любому элементу для того, чтобы добавить новый HTML-контент. Это insertAdjacentHTML - стандартный метод интерфейса Element, который анализирует HTML-документ и вставляет полученные узлы в нужную позицию.

Таким образом, мы получаем эффективный и гибкий способ управления контентом HTML-документа.

Этот метод принимает два параметра:

1. position, который определяет место добавляемого контента относительно элемента, для которого вызывается метод.
2. text, HTML-строка, которая будет проанализирована и вставлена в соответствующую позицию DOM-дерева.

Рассмотрим пример:

const item = '<div>test</div>';

document.querySelector('#container').insertAdjacentHTML('afterend', item);

Обратим внимание на значение afterend, которое является одним из вариантов для параметра position, указывающее на то, что контент item будет вставлен после элемента #container.

Вообще, параметр position может иметь одно из четырех значений:

1. beforebegin: контент будет добавлен перед элементом,
2. afterbegin: контент будет добавлен перед первым потомком элемента,
3. beforeend: контент будет добавлен после последнего потомка элемента,
4. zfterend: контент будет добавлен после элемента.

Вот так, например, можно добавить последний элемент списка:

document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>item</li>')

Спасибо за внимание.