JavaScript метод Element.insertAdjacentText()

Определение и применение

JavaScript метод insertAdjacentText() объекта Element позволяет вставить указанный текстовый узел в заданную позицию относительно элемента, на котором он вызывается.

Схематичное отображение работы метода insertAdjacentText() отображено на следующем изображении:

Схематичное отображение работы метода insertAdjacentText() объекта Element

Поддержка браузерами

Спецификация: dom.spec.whatwg

Поддерживается во всех основных браузерах с 2018 года.

Показать браузеры
Совместимостьapi.Element.insertAdjacentText
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
insertAdjacentText✓1✓17

Версия 17 выпущена в 2018 г.

Версия 12 выпущена в 2015 г. — Удалено в 17; Частичная поддержка

Примечание MDN (англ.)

Only supported for HTMLElement, not all Element objects, such as SVGElement.

✓48✓≤12.1✓4✓18✓48✓≤12.1✓4✓1.0✓2.2✓4

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис

JavaScript
targetElement.insertAdjacentText(position, text);

Спецификация

DOM Standard.

Значения параметров

Параметры Element.insertAdjacentText()
Параметр Описание
position Строковое значение, представляющее позицию относительно целевого элемента.
Возможные значения:
  • "beforebegin" - Текстовое содержимое будет вставлено перед целевым элементом.
  • "afterbegin" - Текстовое содержимое будет вставлено внутри целевого элемента перед его первым дочерним элементом.
  • "beforeend" - Текстовое содержимое будет вставлено внутри целевого элемента после его последнего дочернего элемента.
  • "afterend" - Текстовое содержимое будет вставлено после целевого элемента.
Позиции "beforebegin" и "afterend" работают только в том случае, если узел находится в дереве и имеет родительский элемент. Является обязательным параметром.
text Текстовое содержимое, которое будет вставлено в дерево DOM. Обязательный параметр.

Исключения

Тип исключения Описание — Element.insertAdjacentText()
Тип исключения Описание
SyntaxError Возникает в том случае, если указанная позиция не является возможным значением.

Пример использования

Вставка текста из поля в начало и конец блока

Нажмите ▶, затем одну из кнопок: значение поля будет вставлено как обычный текст, поэтому теги <b> отобразятся буквально. Введите свой текст и вставьте его в другую позицию.

index.html
HTML
<button id="start">Вставить в начало</button><button id="end">Вставить в конец</button>
<p><input aria-label="Текст для вставки" value="<b>текст</b>" /></p>
<div id="result"><p>Исходный параграф</p></div>
main.js
JavaScript
const result = document.querySelector('#result')
const input = document.querySelector('input')
for (const [id, position] of [
    ['start', 'afterbegin'],
    ['end', 'beforeend'],
]) {
    document.getElementById(id).addEventListener('click', () => {
        result.insertAdjacentText(position, input.value)
        input.value = ''
    })
}

В этом примере с использованием метода addEventListener() при нажатии на определенную кнопку (HTML элемент <button>) мы вызываем функцию, которая с помощью метода insertAdjacentText() вставляет текстовое содержимое (значение элемента <input>) внутрь элемента <div> перед его первым дочерним элементом, или после его последнего дочернего элемента.

Обратите внимание, что после каждой вставки мы очищаем значение элемента <input>.