Element.insertAdjacentText()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The insertAdjacentText() метод помещает заданный текстовый узел в указанную позицию относительно элемента, который передан в вызове метода.

Синтаксис

element.insertAdjacentText(position, element);

Параметры

position

DOMString позиция для вставки текста относительно элемента element; должна быть указана в следующем виде:

  • 'beforebegin': Перед самим element.
  • 'afterbegin': Внутри самого element, перед первым child.
  • 'beforeend': Внутри самого element, после последнего child.
  • 'afterend': После самого element.
element

DOMString текст, который будет помещён в заданную позицию.

Возвращаемое значение

Void.

Исключения

Exception Explanation
SyntaxError Указанная position не может быть распознана.

Наглядное отображение параметра position

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->

Примечание: Значения beforebegin и afterend работают только если targetElement находится в DOM-дереве и имеет родительский элемент.

Пример

js
beforeBtn.addEventListener("click", function () {
  para.insertAdjacentText("afterbegin", textInput.value);
});

afterBtn.addEventListener("click", function () {
  para.insertAdjacentText("beforeend", textInput.value);
});

Посмотрите пример insertAdjacentText.html на GitHub (исходный код source code.) Вы можете ввести любой текст в поле формы, а затем нажать кнопки Insert before (вставить до) и Insert after (вставить после) для размещения этого текста до или после существующего абзаца, используя insertAdjacentText(). Обратите внимание, что существующий текстовой узел не изменился, а произошло добавление новых текстовых узлов.

Полифил

Можно создать polyfill для insertAdjacentText() method который будет работать в Internet Explorer 5.5 (возможно и в более ранних версиях) и последующих версиях, с помощью данного кода:

js
if (!Element.prototype.insertAdjacentText)
  Element.prototype.insertAdjacentText = function (type, txt) {
    this.insertAdjacentHTML(
      type,
      (txt + "") // convert to string
        .replace(/&/g, "&amp;") // embed ampersand symbols
        .replace(/</g, "&lt;"), // embed greater than symbols
    );
  };

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

Specification
DOM
# dom-element-insertadjacenttext

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
insertAdjacentText

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

Смотрите также