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
|
---
title: Node.appendChild()
slug: Web/API/Node/appendChild
tags:
- API
- DOM
- Method
- Node
- Reference
translation_of: Web/API/Node/appendChild
---
<div>{{APIRef("DOM")}}</div>
<p>Die <code><strong>Node.appendChild()</strong></code> Methode fügt einen Kind-Knoten am Ende der Liste aller Kinder des angegebenen Eltern-Knotens an (to append = anhängen).</p>
<p>Wenn das gegebene Kind eine Referenz zu einem existierenden Knoten im Dokument ist, wird <code>appendChild()</code> es von der aktuellen Position zu der neuen Position bewegen. Es gibt also keine Notwendigkeit den Knoten erst zu entfernen, weil ein Knoten in einem Dokument nicht gleichzeitig an zwei Stellen vorkommen kann. Also, wenn der Knoten bereits einen Eltern-Knoten hat, wird der Knoten zuerst entfernt und dann erneut am Ende der Kind-Knoten-Liste angehängt.</p>
<p>Das {{domxref("Node.cloneNode()")}} kann genutzt werden um eine Kopie des Knotens zu machen, bevor es an einen neuen Eltern-Knoten angehängt wird. Zu beachten: Kopien die mit <code>cloneNode</code> gemacht wurden, werden nicht automatisch Synchron gehalten.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">var <em>aChild</em> = <em>element</em>.appendChild(<em>aChild</em>);</pre>
<h2 id="Example" name="Example">Parameter</h2>
<p><code>aChild</code></p>
<p>Der Knoten, der an den gegebenen Eltern-Knoten angehängt wird (für gewöhnlich ein Element).</p>
<h2 id="Example" name="Example">Rückgabewert</h2>
<p>Der Rückgabewert ist das angehängte Kindelement (<code>aChild</code>), außer wenn aChild ein {{domxref("DocumentFragment")}} ist. In diesem Fall wird ein {{domxref("DocumentFragment")}} zurückgegeben.</p>
<h2 id="Example" name="Example">Anmerkungen</h2>
<p>Eine Verkettung kann anders ablaufen als erwartet, da appendChild() das Kindelement zurück gibt.</p>
<pre class="line-numbers language-html"><code class="language-html">var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));</code></pre>
<p>Setzt nur <code>aBlock</code> auf <code><b></b></code>, was möglicherweise nicht das gewünschte ist.</p>
<h2 id="Example" name="Example">Beispiele</h2>
<pre class="brush:js">// Erstellen Sie ein neues Absatz-Element und fügen Sie es an das Ende des Dokument-Körpers (body)
var p = document.createElement("p");
document.body.appendChild(p);</pre>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>No change from {{SpecName("DOM3 Core")}}.</td>
</tr>
<tr>
<td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
<td>{{Spec2('DOM3 Core')}}</td>
<td>No change from {{SpecName("DOM2 Core")}}.</td>
</tr>
<tr>
<td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
<td>{{Spec2('DOM2 Core')}}</td>
<td>No change from {{SpecName("DOM1")}}.</td>
</tr>
<tr>
<td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td>
<td>{{Spec2('DOM1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basis Unterstützung</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("1.0")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basis Unterstützung</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1.0")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also" name="See_also">Siehe auch</h2>
<ul>
<li>{{domxref("Node.removeChild()")}}</li>
<li>{{domxref("Node.replaceChild()")}}</li>
<li>{{domxref("Node.insertBefore()")}}</li>
<li>{{domxref("Node.hasChildNodes()")}}</li>
<li>{{domxref("ParentNode.append()")}}</li>
</ul>
|
