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
|
---
title: ParentNode.append()
slug: Web/API/ParentNode/append
translation_of: Web/API/ParentNode/append
---
<div>{{APIRef("DOM")}}</div>
<p><strong><code>ParentNode.append()</code></strong> 메서드는 <code>ParentNode</code>의 마지막 자식 뒤에 {{domxref("Node")}} 객체 또는 {{domxref("DOMString")}} 객체를 삽입한다. {{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="문법">문법</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="요소element_추가하기">요소(element) 추가하기</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="문자text_추가하기">문자(text) 추가하기</h3>
<pre class="brush: js">var parent = document.createElement("div");
parent.append("Some text");
console.log(parent.textContent); // "Some text"</pre>
<h3 id="요소element와_문자text_함께_추가하기">요소(element)와 문자(text) 함께 추가하기</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_범위_지정_불가"><code>ParentNode.append()</code> 범위 지정 불가</h3>
<p><code>append()</code> 메소드는 <code>with</code> 문으로 범위를 지정하지 않는다. 더 자세한 내용은 {{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="대체_구현">대체 구현</h2>
<p>다음 코드를 이용하면 인터넷 익스플로러 9 이상에서 <code>append() method</code>를 대체하여 구현할 수 있다.</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">명세</th>
<th scope="col">상태</th>
<th scope="col">참고</th>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>초기 정의</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>
|
