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
)
}
Спецификация
Спецификация | Статус | Комментарий |
---|---|---|
DOM Определение 'insertAdjacentText()' в этой спецификации. |
Живой стандарт |
Совместимость с браузерами
BCD tables only load in the browser