Método HTML DOM Element appendChild()
- Página anterior addEventListener()
- Página siguiente Atributos
- Volver a la capa superior Objeto Elements del DOM HTML
Definición y uso
appendChild()
El método agrega el nodo (elemento) como el último hijo del elemento.
Vea también:
Métodos de documentación relacionados:
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é
- Té
Después de agregar:
- Café
- Té
- Agua
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é
- Té
- Agua
- Leche
Después de mover:
- Café
- Té
- Leche
- Agua
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);
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);
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 |
- Página anterior addEventListener()
- Página siguiente Atributos
- Volver a la capa superior Objeto Elements del DOM HTML