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
|
---
title: ParentNode.append()
slug: orphaned/Web/API/ParentNode/append
tags:
- API
- DOM
- Method
- Node
- ParentNode
- Reference
translation_of: Web/API/ParentNode/append
original_slug: Web/API/ParentNode/append
---
<p>{{APIRef("DOM")}}</p>
<p><strong><code>ParentNode.append()</code></strong> メソッドは、{{domxref("Node")}} オブジェクト、または {{domxref("DOMString")}} オブジェクトのセットを <code>ParentNode</code> の最後に追加します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと同等に挿入されます。</p>
<p>{{domxref("Node.appendChild()")}} との違いは次の通りです。</p>
<ul>
<li><code>ParentNode.append()</code> は {{domxref("DOMString")}} も追加することができますが、<code>Node.appendChild()</code> は{{domxref("Node")}} オブジェクトのみを受け付けます。</li>
<li><code>ParentNode.append()</code> は戻り値を持っていませんが、<code>Node.appendChild()</code> は追加された{{domxref("Node")}} オブジェクトを返します。</li>
<li><code>ParentNode.append()</code> は複数のノードや文字列を追加することができますが、<code>Node.appendChild()</code> 一つのノードだけしか追加することができせん。</li>
</ul>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate">// [Throws, Unscopable]
ParentNode.append(...<var>nodesOrDOMStrings</var>) // returns undefined
</pre>
<h3 id="Parameters" name="Parameters">引数</h3>
<dl>
<dt><code>nodes</code></dt>
<dd>追加する {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセット</dd>
</dl>
<h3 id="Exceptions" name="Exceptions">例外</h3>
<ul>
<li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の箇所に追加させることができません。</li>
</ul>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Appending_an_element" name="Appending_an_element">要素の追加</h3>
<pre class="brush: js notranslate">let parent = document.createElement("div")
let p = document.createElement("p")
parent.append(p)
console.log(parent.childNodes) // NodeList [ <p> ]
</pre>
<h3 id="Appending_text" name="Appending_text">テキストの追加</h3>
<pre class="brush: js notranslate">let parent = document.createElement("div")
parent.append("Some text")
console.log(parent.textContent) // "Some text"</pre>
<h3 id="Appending_an_element_and_text" name="Appending_an_element_and_text">要素とテキストの追加</h3>
<pre class="brush: js notranslate">let parent = document.createElement("div")
let p = document.createElement("p")
parent.append("Some text", p)
console.log(parent.childNodes) // NodeList [ #text "Some text", <p> ]</pre>
<h3 id="ParentNode.append_is_unscopable" name="ParentNode.append_is_unscopable">ParentNode.append() はスコープが効かない</h3>
<p><code>append()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p>
<pre class="brush: js notranslate">let parent = document.createElement("div")
with(parent) {
append("foo")
}
// ReferenceError: append is not defined </pre>
<h2 id="Polyfill">Polyfill</h2>
<p><code>append()</code> メソッドはInternet Explorer 9 以上であれば以下のコードでポリフィルを当てることができます。</p>
<pre class="brush: js notranslate">// 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="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("api.ParentNode.append")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{domxref("ParentNode")}} および {{domxref("ChildNode")}}</li>
<li>{{domxref("ParentNode.prepend()")}}</li>
<li>{{domxref("Node.appendChild()")}}</li>
<li>{{domxref("ChildNode.after()")}}</li>
<li>{{domxref("Element.insertAdjacentElement()")}}</li>
<li>{{domxref("NodeList")}}</li>
</ul>
|
