Nodo appendChild

Estás leyendo la versión en inglés del artículo porque aún no existe una traducción para este idioma. ¡Ayúdanos a traducir este artículo!

Agrega un nuevo nodo al final de la lista de un elemento hijo de un elemento padre especificado.

Si el hijo(Child) es una referencia(hace referencia) hacia un nodo existente en el documento actual, este es quitado del padre actual para ser puesto en el nodo padre nuevo. La clave está en si el (Child) es una referencia a un nodo existente en el documento.

Nueva API disponible 
El método ParentNode.append() soporta varios argumentos y cadenas para adjuntar.

Sintaxis

element.appendChild(aChild);

Parámetros

aChild
El nodo a adjuntar al nodo padre proporcionado (normalmente un elemento).

Valor de retorno

El valor devuelto es el hijo adjunto excepto cuando el hijo proporcionado es un DocumentFragment, en cuyo caso el DocumentFragment vacío es devuelto.

Notas

El encadenamiento podría no funcionar como se espera debido a que appendChild() devuelve un elemento hijo:

var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));

Establece aBlock como <b></b> sólo, que no es probablemente lo que quieras.

Si el child hace una referencia a un nodo existente en el documento, el método appendChild se mueve de su posición actual a su nueva posición (ej. no existen requerimientos para eliminar el nodo desde su nodo padre antes de añadirlo a cualquier otro nodo).

Ésto significa también que el nodo no puede estar en dos puntos del documento de manera simultánea. Así que si el nodo ya contiene un padre, primero es eliminado, y después se añade a la nueva posición.

Se puede usar Node.cloneNode para hacer una copia del nodo antes de añadirlo debajo de su nuevo elemento padre. (Nota: las copias echas con cloneNode no serán guardadas automáticamente en sincronía.)

Éste método no es permitido para mover nodos entre distintos documentos. Si se quiere añadir un nodo desde un documento diferente (por ejemplo para mostrar los resultados de una petición AJAX) se debe usar primero:
document.importNode.

appendChild() Es uno de los métodos fundamentales de la programación web usando el DOM. El método appendChild() inserta un nuevo nodo dentro de la estructura DOM de un documento, y es la segunda parte del proceso central uno-dos, crear-y-añadir para construir páginas web a base de programación.

Ejemplo

// Crea un nuevo elemento párrafo, y lo agrega al final del cuerpo del documento
var p = document.createElement("p");
document.body.appendChild(p);

Especificaciones

Especifación Estado Comentario
DOM
La definición de 'Node.appendChild()' en esta especificación.
Living Standard Sin cambio desde Document Object Model (DOM) Level 3 Core Specification.
Document Object Model (DOM) Level 3 Core Specification
La definición de 'Node.appendChild()' en esta especificación.
Obsolete Sin cambio desde Document Object Model (DOM) Level 2 Core Specification.
Document Object Model (DOM) Level 2 Core Specification
La definición de 'Node.appendChild()' en esta especificación.
Obsolete Sin cambio desde Document Object Model (DOM) Level 1 Specification.
Document Object Model (DOM) Level 1 Specification
La definición de 'Node.appendChild()' en esta especificación.
Obsolete Definición inicial.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
appendChildChrome Soporte completo SiEdge Soporte completo 12Firefox Soporte completo SiIE Soporte completo 5Opera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Compatibilidad desconocida  
Compatibilidad desconocida

Ver también