1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
---
title: ParentNode.append()
slug: orphaned/Web/API/ParentNode/append
tags:
- API
- DOM
- Node
- ParentNode
- Reference
translation_of: Web/API/ParentNode/append
original_slug: Web/API/ParentNode/append
---
<div>{{APIRef("DOM")}}</div>
<div> <strong><code>ParentNode.append</code></strong> 方法在 <code>ParentNode</code>的最后一个子节点之后插入一组 {{domxref("Node")}} 对象或 {{domxref("DOMString")}} 对象。</div>
<div>被插入的 {{domxref("DOMString")}} 对象等价为 {{domxref("Text")}} 节点。</div>
<div></div>
<div>与 {{domxref("Node.appendChild()")}} 的差异：</div>
<div></div>
<ul>
<li><code>ParentNode.append()</code>允许追加 {{domxref("DOMString")}} 对象，而<code><font face="Open Sans, Arial, sans-serif"> </font>Node.appendChild()</code> 只接受 {{domxref("Node")}} 对象。</li>
<li><code>ParentNode.append()</code> <a href="https://repl.it/FgPh/1">没有返回值</a>，而 <code>Node.appendChild()</code> 返回追加的 {{domxref("Node")}} 对象。</li>
<li><code>ParentNode.append()</code> 可以追加多个节点和字符串，而 <code>Node.appendChild()</code> 只能追加一个节点。</li>
</ul>
<h2 id="语法">语法</h2>
<pre class="syntaxbox">[Throws, Unscopable]
void ParentNode.append((Node or DOMString)... nodes);
</pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>nodes</code></dt>
<dd>一组要插入的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。</dd>
</dl>
<h3 id="异常">异常</h3>
<ul>
<li>{{domxref("HierarchyRequestError")}}: 在层次结构中的指定点不能插入节点。</li>
</ul>
<h2 id="示例">示例</h2>
<h3 id="插入一个元素节点">插入一个元素节点</h3>
<pre class="brush: js">var parent = document.createElement("div");
var p = document.createElement("p");
parent.append(p);
console.log(parent.childNodes); // NodeList [ <p> ]
</pre>
<h3 id="插入文本">插入文本</h3>
<pre class="brush: js">var parent = document.createElement("div");
parent.append("Some text");
console.log(parent.textContent); // "Some text"</pre>
<h3 id="插入一个节点，同时插入一些文本">插入一个节点，同时插入一些文本</h3>
<pre class="brush: js">var parent = document.createElement("div");
var p = document.createElement("p");
parent.append("Some text", p);
console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]</pre>
<h3 id="ParentNode.append_方法在_with_语句中不生效"><code>ParentNode.append()</code> 方法在 with 语句中不生效</h3>
<p>为了保证向后兼容，append 方法在 with 语句中会被特殊处理，详情请看 {{jsxref("Symbol.unscopables")}}。</p>
<pre class="brush: js">var parent = document.createElement("div");
with(parent) {
append("foo");
}
// ReferenceError: append is not defined </pre>
<h2 id="Polyfill">Polyfill</h2>
<p>下面的 Polyfill 只支持到 IE 9 及以上：</p>
<pre class="brush: js">// 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]);</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容">浏览器兼容</h2>
<p>{{Compat("api.ParentNode.append")}}</p>
<h2 id="相关链接">相关链接</h2>
<ul>
<li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li>
<li>{{domxref("ParentNode.prepend()")}}</li>
<li>{{domxref("Node.appendChild()")}}</li>
<li>{{domxref("ChildNode.after()")}}</li>
<li>{{domxref("NodeList")}}</li>
</ul>
|
