Método HTML DOM Element appendChild()

Definición y uso

appendChild() El método agrega el nodo (elemento) como el último hijo del elemento.

Vea también:

Método insertBefore()

Método replaceChild()

Método removeChild()

Método remove()

Atributo childNodes

Atributo firstChild

Atributo lastChild

Atributo firstElementChild

Atributo lastElementChild

Métodos de documentación relacionados:

Método createElement()

Método createTextNode()

Ejemplo

Ejemplo 1

Agregar un elemento a la lista:

const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);

Antes de agregar:

  • Café

Después de agregar:

  • Café
  • Agua

Prueba por tu cuenta

Ejemplo 2

Mover un elemento de lista a otra lista:

const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);

Antes de mover:

  • Café

  • Agua
  • Leche

Después de mover:

  • Café
  • Leche

  • Agua

Prueba por tu cuenta

Ejemplo 3

Crear un párrafo con texto:

  • Crear un elemento de párrafo
  • Crear un nodo de texto
  • Agregar un nodo de texto al párrafo
  • Agregar párrafo al documento

Crear un elemento <p> y agregarlo al elemento <div>:

const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);

Prueba por tu cuenta

Ejemplo 4

Crear un elemento <p> y agregarlo al cuerpo del documento:

const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);

Prueba por tu cuenta

Sintaxis

element.appendChild(node)

o

node.appendChild(node)

Parámetros

Parámetros Descripción
node Requerido. Nodo a agregar.

Valor de retorno

Tipo Descripción
Nodo Nodo agregado.

Compatibilidad del navegador

element.appendChild() Es una característica del nivel DOM 1 (1998).

Todos los navegadores lo soportan completamente:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte 9-11 Soporte Soporte Soporte Soporte