ParentNode.append()
与
Node.appendChild()
的差异:语法
[Throws, Unscopable] void ParentNode.append((Node or DOMString)... nodes);
参数
异常
HierarchyRequestError
: 在层次结构中的指定点不能插入节点。
示例
插入一个元素节点
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("Some text");
console.log(parent.textContent); // "Some text"
插入一个节点,同时插入一些文本
var parent = document.createElement("div");
var p = document.createElement("p");
parent.append("Some text", p);
console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
ParentNode.append()
方法在 with 语句中不生效
为了保证向后兼容,append 方法在 with 语句中会被特殊处理,详情请看 Symbol.unscopables
。
var parent = document.createElement("div");
with(parent) {
append("foo");
}
// ReferenceError: append is not defined
Polyfill
下面的 Polyfill 只支持到 IE 9 及以上:
// Source: 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]);
规范
Specification | Status | Comment |
---|---|---|
DOM ParentNode.append() |
Living Standard | Initial definition. |
浏览器兼容
No compatibility data found for api.ParentNode.append
.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.