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