Элемент: метод insertAdjacentText()

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

where

Строка, представляющая позицию относительно элемента, из которого вызывается метод; должна быть одной из следующих строк:

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

data

Строка, из которой будет создан новый узел текста для вставки в заданную позицию where относительно элемента, из которого вызывается метод.

None (undefined).

SyntaxError DOMException

Выбрасывается, если where не является распознаваемым значением.

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

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

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

• Element.insertAdjacentElement()
• Element.insertAdjacentHTML()