Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Метод ParentNode.append
добавляет набор объектов Node
или DOMString
в конец (после последнего потомка) ParentNode
. DOMString
объекты добавляются как Text
.
Отличия от Node.appendChild()
:
ParentNode.append()
позволяет добавлятьDOMString
объекты, в то время какNode.appendChild()
принимает толькоNode
.ParentNode.append()
ничего не возвращает, в то время какNode.appendChild()
возвращает добавленный объектNode
.ParentNode.append()
позволяет добавить несколько узлов (node) или строк, в то время какNode.appendChild()
может добавть только один узел (node).
Синтаксис
[Throws, Unscopable] void ParentNode.append((Node или DOMString)... nodes);
Параметры
Исключения
HierarchyRequestError
: Узел (node) не может быть вставлен в определённую точку в иерархии страницы.
Примеры
Добавление элемента
var parent = document.createElement("div");
var p = document.createElement("p");
parent.append(p);
console.log(parent.childNodes); // NodeList [ <p> ]
Добавление строки
var parent = document.createElement("div");
parent.append("Любой текст");
console.log(parent.textContent); // "Любой текст"
Добавление элемента или строки
var parent = document.createElement("div");
var p = document.createElement("p");
parent.append("Любой текст", p);
console.log(parent.childNodes); // NodeList [ #text "Любой текст", <p> ]
ParentNode.append()
не имеет области видимости
Метод append()
не имеет области видимости с директивой with
. Больше информации в Symbol.unscopables
.
var parent = document.createElement("div");
with(parent) {
append("foo");
}
// ReferenceError: append is not defined
Полифил
Вы можете использовать полифил для метода append()
в Internet Explorer 9 и выше:
// Источник: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
(function (arr) {
arr.forEach(function (item) {
if (item.hasOwnProperty('append')) {
return;
}
Object.defineProperty(item, 'append', {
configurable: true,
enumerable: true,
writable: true,
value: function append() {
var argArr = Array.prototype.slice.call(arguments),
docFrag = document.createDocumentFragment();
argArr.forEach(function (argItem) {
var isNode = argItem instanceof Node;
docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
});
this.appendChild(docFrag);
}
});
});
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
Спецификация
Спецификация | Статус | Комментарий |
---|---|---|
DOM Определение 'ParentNode.append()' в этой спецификации. |
Живой стандарт | Initial definition. |
Поддержка браузерами
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.