В этом руководстве вы узнаете, как использовать метод insertAdjacentHTML() для вставки HTML в документ.
insertAdjacentHTML() — это метод интерфейса Element, который можно вызывать из любого элемента.
Метод анализирует фрагмент текста HTML и вставляет полученные узлы в дерево DOM в указанной позиции:
element.insertAdjacentHTML(positionName, text);
Метод insertAdjacentHTML() имеет два параметра:
1) position
positionName — это строка, представляющая позицию относительно элемента. positionName принимает одно из следующих четырех значений:
'beforebegin': перед элементом.'afterbegin': перед первым дочерним элементом элемента.'beforeend': после последнего дочернего элемента элемента.'afterend': после элемента.
Обратите внимание, что 'beforebegin' и 'afterbegin' имеют значение только в том случае, если элемент находится в дереве DOM и имеет родительский элемент.
Метод insertAdjacentHTML() не имеет возвращаемого значения или undefined по умолчанию.
Следующая визуализация иллюстрирует название позиции:
2) text
Параметр text представляет собой строку, которую метод insertAdjacentHTML() анализирует как HTML или XML. Это не могут быть объекты Node.
Соображения безопасности
Как и в случае с innerHTML, если вы используете пользовательский ввод для передачи в метод insertAdjacentHTML(), вы всегда должны избегать его, чтобы избежать риска безопасности.
Пример
В следующем примере JavaScript используется метод insertAdjacentHTML() для вставки различных элементов на страницу с позициями относительно элемента ul :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>insertAdjacentHTML() Demo</title>
</head>
<body>
<ul id="list">
<li>CSS</li>
</ul>
<script>
let list = document.querySelector('#list');
list.insertAdjacentHTML('beforebegin', '<h2>Web Technology</h2>');
list.insertAdjacentHTML('afterbegin', '<li>HTML</li>');
list.insertAdjacentHTML('beforeend', '<li>JavaScript</li>');
list.insertAdjacentHTML('afterend', '<p>For frontend developers</p>');
</script>
</body>
</html>Как это работает:
- Сначала выберите элемент
ulпо егоlistидентификаторов, используя методquerySelector(). - Затем используйте метод
insertAdjacentHTML(), чтобы вставить элемент заголовка 2 перед элементомul. Позиция'beforebegin'. - Затем используйте метод, чтобы вставить новый элемент списка перед первым дочерним элементом элемента ul. Позиция
'afterbegin'. - После этого используйте метод
insertAdjacentHTML(), чтобы вставить новый элемент элемента списка после последнего дочернего элемента элемента ul с позицией'beforeend'. - Наконец, вставка использует метод
insertAdjacentHTML()для вставки нового элемента абзаца после элемента ul с позицией'afterend'.
Заключение
- Используйте функцию, чтобы вставить текст в качестве Nodes в дерево DOM в указанной позиции.
- Всегда экранируйте вводимый пользователем текст, который вы передаете в метод
insertAdjacentHTML(), чтобы избежать риска безопасности.