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")}}</div>
<p><code style=""><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">El método </span></font><strong>ParentNode.append()</strong></code> inserta un conjunto de objetos de tipo {{domxref("Node")}} u objetos de tipo {{domxref("DOMString")}} después del último hijo de <code>ParentNode</code>. Los objetos {{domxref("DOMString")}} son insertados como nodos {{domxref("Text")}} equivalentes.</p>
<p>Diferencias con {{domxref("Node.appendChild()")}}:</p>
<ul>
<li><code>ParentNode.append()</code> te permite también agregar objetos {{domxref("DOMString")}}, mientras que <code>Node.appendChild()</code> solo acepta objetos {{domxref("Node")}}.</li>
<li><code>ParentNode.append()</code> no tiene valor de retorno, en cambio, <code>Node.appendChild()</code> devuelve el objeto {{domxref("Node")}} agregado.</li>
<li><code>ParentNode.append()</code> puede agregar varios nodos y cadenas, mientras que <code>Node.appendChild()</code> sólo puede agregar uno.</li>
</ul>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox">[Throws, Unscopable]
void ParentNode.append((Node or DOMString)... nodes);
</pre>
<h3 id="Parameters">Parameters</h3>
<dl>
<dt><code>nodes</code></dt>
<dd>Un conjunto de {{domxref("Node")}} u objetos {{domxref("DOMString")}} a agegar.</dd>
</dl>
<h3 id="Exceptions">Exceptions</h3>
<ul>
<li>{{domxref("HierarchyRequestError")}}: Node cannot be inserted at the specified point in the hierarchy.</li>
</ul>
<h2 id="Examples">Examples</h2>
<h3 id="Appending_an_element">Appending an 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="Appending_text">Appending text</h3>
<pre class="brush: js">var parent = document.createElement("div");
parent.append("Some text");
console.log(parent.textContent); // "Some text"</pre>
<h3 id="Appending_an_element_and_text">Appending an element and 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_is_unscopable"><code>ParentNode.append()</code> is unscopable</h3>
<p>The <code>append()</code> method is not scoped into the <code>with</code> statement. See {{jsxref("Symbol.unscopables")}} for more information.</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>You can polyfill the <code>append() method</code> in Internet Explorer 9 and higher with the following 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="Specification">Specification</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="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.ParentNode.append")}}</p>
<h2 id="See_also">See also</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>
|
