Метод insertAdjacentElement позволяет вставить элемент в любое место страницы. Чаще всего используется после создания элемента с помощью createElement.
Код вставляется относительно опорного элемента. Можно сделать вставку перед опорным элементом (способ вставки beforeBegin), после него (способ вставки afterEnd), а также в начало (способ вставки afterBegin) или в конец (способ вставки beforeEnd) опорного элемента.
Синтаксис
опорный элемент.insertAdjacentElement(способ вставки, код для вставки)
Пример . Способ beforeBegin
Пусть опорный элемент - это элемент #target. Вставим перед ним новый абзац:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.innerHTML = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Результат выполнения кода:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Пример . Способ afterEnd
А теперь вставим новый абзац после опорного элемента:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.innerHTML = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Результат выполнения кода:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Пример . Способ afterBegin
Вставим новый абзац в начало опорного элемента:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.innerHTML = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Результат выполнения кода:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Пример . Способ beforeEnd
Вставим новый абзац в конец опорного элемента:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.innerHTML = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Результат выполнения кода:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Смотрите также
-
метод insertAdjacentHTML,
который вставляет теги в заданное место -
метод insertAdjacentText,
который вставляет текст в заданное место -
метод prepend,
который вставляет элементы в начало -
метод append,
который вставляет элементы в конец -
метод appendChild,
который вставляет элементы в конец родителя -
метод insertBefore,
который вставляет элементы перед элементом