Elemento HTML DOM appendChild()

❮ Anterior ❮ Referencia de objeto de elemento Siguiente ❯

Ejemplos

Añadir un elemento a una lista:

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

Antes:

Coffee
Tea

Después:

Coffee
Tea
Water

Mover un elemento de una lista a otra:

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

Antes:

Coffee
Tea

Water
Milk

Después:

Coffee
Tea
Milk

Water

Más ejemplos a continuación.

Definición y uso

El appendChild()método agrega un nodo como el último hijo de un nodo.

Sugerencia: si desea crear un nuevo párrafo, con texto, recuerde crear el texto como un nodo de texto que agregará al párrafo y luego agregará el párrafo al documento.

También puede usar este método para mover un elemento de un elemento a otro (consulte "Más ejemplos").

Ver también:

La propiedad FirstChild del elemento

La propiedad lastChild del elemento

El método del elemento insertBefore()

Sintaxis

node.appendChild(node)

Parámetros

Parameter	Description
node	Required. The node to append.

Valor devuelto

Escribe	Descripción
Nodo	El nodo adjunto

Más ejemplos

Crea un elemento <p> y añádelo a un elemento <div>:

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

para.appendChild(node);
document.getElementById("myDIV").appendChild(para);

Crea un elemento <p> y añádelo al cuerpo del documento:

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

para.appendChild(node);
document.body.appendChild(para);