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
|
---
title: ParentNode.append()
slug: orphaned/Web/API/ParentNode/append
translation_of: Web/API/ParentNode/append
original_slug: Web/API/ParentNode/append
---
<div>{{APIRef("DOM")}} {{SeeCompatTable}}</div>
<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> позволяет добавить несколько узлов (node) или строк, в то время как <code>Node.appendChild()</code> может добавить только один узел (node).</li>
</ul>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox">[Throws, Unscopable]
void ParentNode.append((Node или 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")}}: Узел (node) не может быть вставлен в определённую точку в иерархии страницы.</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("Любой текст");
console.log(parent.textContent); // "Любой текст"</pre>
<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 [ #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>Вы можете использовать полифил для <code>метода append()</code> в Internet Explorer 9 и выше:</p>
<pre class="brush: js">// Источник: 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>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{Compat("api.ParentNode.append")}}</p>
<h2 id="Смотрите_также">Смотрите также</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("NodeList")}}</li>
</ul>
|
