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, "&") // embed ampersand symbols
.replace(/</g, "<"), // embed greater than symbols
);
};
Спецификации
Specification |
---|
DOM Standard # dom-element-insertadjacenttext |
Совместимость с браузерами
BCD tables only load in the browser