---
title: Node.appendChild()
slug: Web/API/Node/appendChild
tags:
  - API
  - DOM
  - Node
  - Referenza
  - metodo
translation_of: Web/API/Node/appendChild
---
<div>{{APIRef("DOM")}}</div>

<p>Il metodo <code><strong>Node.appendChild()</strong></code> aggiunge un nodo alla fine dell'elenco di figli di un nodo genitore specificato. Se il figlio dato è un riferimento a un nodo esistente nel documento, <code>appendChild()</code> lo sposta dalla sua posizione corrente alla nuova posizione (non è necessario rimuovere il nodo dal suo nodo padre prima di aggiungerlo ad un altro nodo).</p>

<p>Ciò significa che un nodo non può essere in due punti del documento contemporaneamente. Quindi se il nodo ha già un genitore, il nodo viene prima rimosso, quindi aggiunto alla nuova posizione. Il metodo {{domxref("Node.cloneNode()")}} può essere usato per fare una copia del nodo prima di aggiungerlo sotto il nuovo genitore. Si noti che le copie eseguite con <code>cloneNode</code> non verranno automaticamente mantenute sincronizzate.</p>

<p>Se il figlio dato è un {{domxref("DocumentFragment")}}, l'intero contenuto di {{domxref("DocumentFragment")}} viene spostato nell'elenco secondario del nodo genitore specificato.</p>

<h2 id="Syntax" name="Syntax">Sintassi</h2>

<pre class="syntaxbox"><em>element</em>.appendChild(<em>aChild</em>);</pre>

<h3 id="Returns" name="Returns">Parametri</h3>

<dl>
 <dt><strong>aChild</strong></dt>
 <dd>Il nodo da aggiungere al nodo genitore dato (comunemente un elemento).</dd>
</dl>

<h3 id="Returns" name="Returns">Valore di ritorno</h3>

<p>Il valore restituito è il figlio aggiunto tranne quando il figlio dato è un {{domxref("DocumentFragment")}}, nel qual caso viene restituito il {{domxref("DocumentFragment")}}.</p>

<h2 id="Notes" name="Notes">Appunti</h2>

<p>Il concatenamento potrebbe non funzionare come previsto a causa di <code>appendChild()</code> che restituisce l'elemento figlio:</p>

<pre class="brush: js">var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));</pre>

<p>Sets <code>aBlock</code> to <code>&lt;b&gt;&lt;/b&gt;</code> only, which is probably not what you want.</p>

<h2 id="Example" name="Example">Esempio</h2>

<pre class="brush:js">// Crea un nuovo elemento di paragrafo e aggiungilo alla fine del corpo del documento
var p = document.createElement("p");
document.body.appendChild(p);</pre>

<h2 id="Specifiche">Specifiche</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specifica</th>
   <th scope="col">Stato</th>
   <th scope="col">Commento</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Nessun cambiamento da {{SpecName("DOM3 Core")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
   <td>{{Spec2('DOM3 Core')}}</td>
   <td>Nessun cambiamento da {{SpecName("DOM2 Core")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
   <td>{{Spec2('DOM2 Core')}}</td>
   <td>Nessun cambiamento da {{SpecName("DOM1")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>Definizione inziale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>

<div>


<p>{{Compat("api.Node.appendChild")}}</p>
</div>

<h2 id="See_also" name="See_also">Vedi anche</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>