Element.append()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since апрель 2018 г..
Метод Element.append() вставляет узлы или строки с текстом в конец Element. Строки с текстом вставляются как текстовое содержимое.
Отличия от метода Node.appendChild():
- Метод
Element.append()позволяет вставлятьстроки с текстом, в то время какNode.appendChild()работает только сузлами. - При вызове метод
Element.append()ничего не возвращает, в то время какNode.appendChild()возвращает вставленныйузел. - С помощью
Element.append()можно вставить сразу несколько узлов или строк текста, в то время какNode.appendChild()умеет вставлять по одной сущности за раз.
Синтаксис
js
append(...nodesOrDOMStrings);
Аргументы
nodesOrDOMStrings-
Один или несколько
узловилистрок с текстом, которые необходимо вставить.
Исключения
HierarchyRequestErrorDOMException-
Случается, когда узел не может быть вставлен в существующую иерархию элементов.
Примеры
Вставка элемента
js
let div = document.createElement("div");
let p = document.createElement("p");
div.append(p);
console.log(div.childNodes); // NodeList [ <p> ]
Вставка текста
js
let div = document.createElement("div");
div.append("Какой-то текст");
console.log(div.textContent); // "Какой-то текст"
Вставка и текста, и элемента сразу
js
let div = document.createElement("div");
let p = document.createElement("p");
div.append("Какой-то текст", p);
console.log(div.childNodes); // NodeList [ #text "Какой-то текст", <p> ]
Область видимости метода нерасширяема
Метод append() не работает с оператором with. Подробнее читайте в справке по Symbol.unscopables.
js
let div = document.createElement("div");
with (div) {
append("foo");
}
// ReferenceError: append is not defined
Спецификации
| Specification |
|---|
| DOM # ref-for-dom-parentnode-append① |
Совместимость с браузерами
Loading…