Método HTML DOM appendChild()

Objeto Elemento de HTML DOM

appendChild()El objetivo del método es: agregar un nodo al final de la lista de nodos del padre especificado.

Si el nodo hijo especificado es una referencia a un nodo existente en el documento, appendChild() lo mueve desde su posición actual a una nueva posición (ver los ejemplos adicionales a continuación).

UsoinsertBefore()El método se puede usar para insertar un nuevo nodo antes de un nodo hijo existente en la lista de nodos del padre especificado.

Sintaxis:

node.appendChild(node)

var newElem = document.createElement("h3　　　//　Crear un nuevo h3Elemento
var newContent = document.createTextNode("¡Hola, ¡hola!");　//　Crear algunos contenido de texto　
newElem.appendChild(newContent);　//　　Agregar un nodo de texto a un nuevo h3　
document.body.appendChild(newElem);　　//　　Agregar el nuevo elemento y su contenido al DOM

Nota:Si se crea un nuevo elemento con texto, recuerde crear el texto como nodo de Texto, luego agregarlo al elemento y luego agregar el elemento al documento.

Compatibilidad con navegadores

Todos los navegadores soportan completamente el método appendChild():

Valor del parámetro

Detalles técnicos

Más ejemplos

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

var para = document.createElement("p");　　　//　Crear un nodo <p>
var txt = document.createTextNode("Este es un párrafo.");//　Crear un nodo de texto
para.appendChild(txt);//　Añadir el texto al <p>
document.getElementById("demo").appendChild(para);//　Añadir <p> a <div>

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

var para = document.createElement("p");　　　//　Crear un nodo <p>
var txt = document.createTextNode("Este es un párrafo.");//　Crear un nodo de texto
para.appendChild(txt);//　Añadir el texto al <p>
document.body.appendChild(para);//　Añadir <p> al body

Este ejemplo mueve un elemento desde su posición actual a una nueva posición:

var elem = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1).appendChild(elem);

Referencias relacionadas

Referencia de HTML DOM:node.hasChildNodes()

Referencia de HTML DOM:node.insertBefore()

Referencia de HTML DOM:node.removeChild()

Referencia de HTML DOM:node.replaceChild()

Referencia de HTML DOM:Método document.createElement()

Referencia de HTML DOM:Método document.createTextNode()

Referencia de HTML DOM:Método document.adoptNode()

Referencia de HTML DOM:Método document.importNode()

Objeto Elemento de HTML DOM