Element.insertAdjacentText()

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-дереве и имеет родительский элемент.

Пример

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 (возможно и в более ранних версиях) и последующих версиях, с помощью данного кода:

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
    )
  }

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

Спецификация Статус Комментарий
DOM
Определение 'insertAdjacentText()' в этой спецификации.
Живой стандарт

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
insertAdjacentTextChrome Полная поддержка 1Edge Полная поддержка 18
Полная поддержка 18
Полная поддержка 12
Замечания
Замечания This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Firefox Полная поддержка 48IE Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Opera Полная поддержка ДаSafari Полная поддержка 10WebView Android Полная поддержка 2.3Chrome Android Полная поддержка 18Firefox Android Полная поддержка 48Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.

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