Метод insertAdjacentHTML() в JavaScript
Метод insertAdjacentHTML() позволяет вставлять HTML-код в конкретное место относительно существующего элемента, не перезаписывая его содержимое.
element.insertAdjacentHTML(позиция, htmlString);
В строке позиция укажем куда втыкаем HTML разметку.
А в htmlString сам HTML код.
Список возможных значений
| Значение | Куда вставляет |
|---|---|
'beforebegin' | Перед элементом (снаружи) |
'afterbegin' | Внутрь элемента, в начало |
'beforeend' | Внутрь элемента, в конец |
'afterend' | После элемента (снаружи) |
Пример с добавлением перед элементом
let box = document.getElementById('box');
box.insertAdjacentHTML('beforebegin', '<p>Текст перед блоком</p>');
Метод insertAdjacentHTML() позволяет вставлять код в нужное место без лишних изменений и без создания временных элементов.