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