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 ⁨апрель 2018 г.⁩.

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

Синтаксис

element.insertAdjacentText(position, element);

Параметры

position

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

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

element

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

Исключения

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