Element.append()
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde abril de 2018.
El método Element.append()
inserta un conjunto de objetos Node u objetos de tipo cadena
después del último hijo de Element. Los objetos de tipo cadena se insertan
como nodos Text equivalentes.
Diferencias respecto a Node.appendChild():
Element.append()permite añadir también objetos de tipo cadena, mientras queNode.appendChild()sólo acepta objetos de tipoNode.Element.append()no tiene valor de retorno, mientras queNode.appendChild()devuelve el objetoNodeañadido.Element.append()puede añadir varios nodos y cadenas de texto, mientras queNode.appendChild()sólo puede añadir un nodo.
Sintaxis
js
append(param1)
append(param1, param2)
append(param1, param2, /* … ,*/ paramN)
Parámetros
param1, …,paramN-
Un conjunto de objetos de tipo
Nodeo cadena para insertar.
Valor de retorno
Ninguno (undefined).
Excepciones
HierarchyRequestErrorDOMException-
Se lanza cuando el nodo no puede insertarse en el punto especificado de la jerarquía.
Ejemplos
Añadir un elemento
js
let div = document.createElement("div");
let p = document.createElement("p");
div.append(p);
console.log(div.childNodes); // NodeList [ <p> ]
Añadir texto
js
let div = document.createElement("div");
div.append("Algo de texto");
console.log(div.textContent); // "Algo de texto"
Añadir un elemento y texto
js
let div = document.createElement("div");
let p = document.createElement("p");
div.append("Algo de texto", p);
console.log(div.childNodes); // NodeList [ #text "Algo de texto", <p> ]
El método append no se puede recorrer
El método append() no está incluido en la sentencia with. Véase
Symbol.unscopables para más información.
js
let div = document.createElement("div");
with (div) {
append("foo");
}
// ReferenceError: append is not defined
Especificaciones
| Especificación |
|---|
| DOM # ref-for-dom-parentnode-append① |