files/pt-pt/web/api/node/appendchild/index.html


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

---
title: element.appendChild
slug: Web/API/Node/appendChild
tags:
  - Referência_do_DOM_Gecko
translation_of: Web/API/Node/appendChild
original_slug: DOM/element.appendChild
---
<p>{{ ApiRef() }}</p>
<h3 id="Sumario" name="Sumario">Sumario</h3>
<p>Adiciona um novo nó (filho) a um determinado elemento (objeto)</p>
<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3>
<pre class="eval"><i>element</i>.appendChild(<i>child</i>)
</pre>
<ul>
 <li><code>element</code> é o elemento pai.</li>
 <li><code>child</code> é o nó que será adicionado como filho de <code>element</code>.</li>
</ul>
<h3 id="Exemplo" name="Exemplo">Exemplo</h3>
<pre>// Cria um novo Elemento(Objeto)
var p = document.createElement("p");

// Adiciona ao Elemento Body (este deverá existir!)
document.body.appendChild(p);
</pre>
<h3 id="Notas" name="Notas">Notas</h3>
<p>Se <code>child</code> é a referência para um nó ja existente no documento, <code>appendChild</code> moverá este para a nova posição (ou seja não é necessário remover um nó de uma posição para depois adicionar em outra). Isto significa que um nó não pode estar em dois lugares do documento ao mesmo tempo.</p>
<p>Você pode usar também <a href="pt/DOM/element.cloneNode">cloneNode</a> para copiar este nó e depois adicioná-lo a outro elemento. (Observe que ao criar um objeto ultilizando <code>cloneNode</code> ou <code>createElement</code> este não fará parte do documento até você torna-lo parte deste usando appendChild ou método similar)</p>
<p>Métodos relacionados : <a href="pt/DOM/element.insertBefore">insertBefore</a>, <a href="pt/DOM/element.replaceChild">replaceChild</a> and <a href="pt/DOM/element.removeChild">removeChild</a>. <span class="comment">&lt;code&gt;appendChild&lt;/code&gt; é um dos métodos essenciais na programação usando DOM. O método &lt;code&gt;appendChild&lt;/code&gt; insere um novo nó na estrutura DOM e este é a segunda parte da metodologia create-and-append.</span></p>
<h3 id="Especifica.C3.A7.C3.A3o" name="Especifica.C3.A7.C3.A3o">Especificação</h3>
<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-184E7107">DOM Level 2 Core: appendChild</a></p>
<p>{{ languages( { "en": "en/DOM/element.appendChild", "fr": "fr/DOM/element.appendChild", "pl": "pl/DOM/element.appendChild" } ) }}</p>