Code Ready | Frontend
Разбираем insertAdjacentHTML() — вставляем HTML без повторного парсинга существующего содержимого!
Для добавления разметки в элемент иногда используют innerHTML +=:
list.innerHTML += '<li>Новый элемент</li>';
Но это не точечная вставка. Браузер получает текущее содержимое как строку, добавляет новую разметку и снова устанавливает innerHTML.
В результате существующие дочерние DOM-узлы могут быть заменены новыми:
const button = list.querySelector('button');
list.innerHTML += '<li>Новый</li>';
console.log(
list.querySelector('button') === button
);
// false
Для вставки HTML без повторного парсинга существующего содержимого есть insertAdjacentHTML():
const button = list.querySelector('button');
list.insertAdjacentHTML(
'beforeend',
'<li>Новый</li>'
);
console.log(
list.querySelector('button') === button
);
// true
Метод принимает позицию вставки и HTML-строку:
beforebegin
afterbegin
beforeend
afterend
Например, вставка первым дочерним элементом:
list.insertAdjacentHTML(
'afterbegin',
'<li>Первый</li>'
);
А afterend вставляет разметку после самого элемента:
list.insertAdjacentHTML(
'afterend',
'<p>После списка</p>'
);
beforebegin и afterend работают относительно родительского элемента, поэтому целевой элемент должен иметь родителя.
Что важно: insertAdjacentHTML() передает строку HTML-парсеру и не выполняет санитизацию. Передача недоверенного HTML создает риск XSS. Для обычного текста используйте textContent или insertAdjacentText(), а недоверенный HTML необходимо корректно санитизировать.
🔥 В отличие от innerHTML +=, insertAdjacentHTML() позволяет вставить новый HTML-фрагмент в нужную позицию, не заменяя уже существующие DOM-узлы.
📣 Code Ready | #практика
25 · 1.5K ·