HTML DOM appendChild() Method

Ejemplo

Anexar un elemento de una lista:

var node = document.createElement("LI");                 // Create a <li> node
var textnode = document.createTextNode("Water");         // Create a text node
node.appendChild(textnode);                              // Append the text to <li>
document.getElementById("myList").appendChild(node);     // Append <li> to <ul> with id="myList"

Antes de añadir:

Coffee
Tea

Después de anexar:

Coffee
Tea
Water

Inténtalo tú mismo "

Más "Try it Yourself" ejemplos a continuación.

Definición y Uso

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

Consejo: Si desea crear un nuevo párrafo, con el texto, recuerde que debe crear el texto como un nodo de texto que se anexa al párrafo, a continuación, añadir el párrafo al documento.

También puede utilizar este método para mover un elemento de un elemento a otro (See "More Examples") .

Consejo: Utilice la insertBefore() método para insertar un nuevo nodo hijo antes de una, ya existente, el nodo secundario especificado.

Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.

Método
appendChild()	Sí	Sí	Sí	Sí	Sí

Sintaxis

node .appendChild( node )

Los valores de los parámetros

Parámetro	Tipo	Descripción
node	Node object	Necesario. El objeto de nodo desea anexar

Detalles técnicos

Valor de retorno:	Un objeto de nodo, representando el nodo anexa
Versión DOM	Nivel básico de objetos 1 Nodo

Más ejemplos

Ejemplo

Mover un elemento de la lista de una lista a otra:

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

Antes de añadir:

Coffee
Tea

Water
Milk

Después de anexar:

Coffee
Tea
Milk

Water

Inténtalo tú mismo "

Ejemplo

Crear un <p> elemento y añadirlo a un <div> elemento:

var para = document.createElement("P");                       // Create a <p> node
var t = document.createTextNode("This is a paragraph.");      // Create a text node
para.appendChild(t);                                          // Append the text to <p>
document.getElementById("myDIV").appendChild(para);           // Append <p> to <div> with id="myDIV"

Inténtalo tú mismo "

Ejemplo

Crear un <p> elemento con un poco de texto y añadirlo al final del cuerpo del documento:

var x = document.createElement("P");                        // Create a <p> node
var t = document.createTextNode("This is a paragraph.");    // Create a text node
x.appendChild(t);                                           // Append the text to <p>
document.body.appendChild(x);                               // Append <p> to <body>

Inténtalo tú mismo "