Метод insertAdjacentText в JavaScript

Метод insertAdjacentText позволяет вставить строку в любое место страницы. Строка вставляется относительно опорного элемента. Можно сделать вставку перед опорным элементом (способ вставки beforeBegin), после него (способ вставки afterEnd), а также в начало (способ вставки afterBegin) или в конец (способ вставки beforeEnd) опорного элемента.

Синтаксис

опорный элемент.insertAdjacentText(способ вставки, текст для вставки)

Пример

Пусть опорный элемент - это элемент #target. Вставим перед ним какой-нибудь текст:

<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('beforeBegin', 'text');
// text
// <div id="target">
// <p>elem</p>
// </div>

Пример

А теперь вставим новый абзац после опорного элемента:

<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('afterEnd', 'text');
// <div id="target">
// <p>elem</p>
// </div>
// text

Пример

Вставим новый абзац в начало опорного элемента:

<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('afterBegin', 'text');
// <div id="target">
// text
// <p>elem</p>
// </div>

Пример

Вставим новый абзац в конец опорного элемента:

<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('beforeEnd', 'text');
// <div id="target">
// <p>elem</p>
// text
// </div>