ParentNode.append()

El método ParentNode.append() inserta un conjunto de objetos de tipo Node u objetos de tipo DOMString después del último hijo de ParentNode. Los objetos DOMString son insertados como nodos Text equivalentes.

Diferencias con Node.appendChild():

  • ParentNode.append() te permite también agregar objetos DOMString, mientras que Node.appendChild() solo acepta objetos Node.
  • ParentNode.append() no tiene valor de retorno, en cambio, Node.appendChild() devuelve el objeto Node agregado.
  • ParentNode.append() puede agregar varios nodos y cadenas, mientras que Node.appendChild() sólo puede agregar uno.

Sintaxis

[Throws, Unscopable]
void ParentNode.append((Node or DOMString)... nodes);

Parameters

nodes
Un conjunto de Node u objetos DOMString a agegar.

Exceptions

Examples

Appending an element

var parent = document.createElement("div");
var p = document.createElement("p");
parent.append(p);

console.log(parent.childNodes); // NodeList [ <p> ]

Appending text

var parent = document.createElement("div");
parent.append("Some text");

console.log(parent.textContent); // "Some text"

Appending an element and text

var parent = document.createElement("div");
var p = document.createElement("p");
parent.append("Some text", p);

console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]

ParentNode.append() is unscopable

The append() method is not scoped into the with statement. See Symbol.unscopables for more information.

var parent = document.createElement("div");

with(parent) { 
  append("foo");
}
// ReferenceError: append is not defined 

Polyfill

You can polyfill the append() method in Internet Explorer 9 and higher with the following code:

// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('append')) {
      return;
    }
    Object.defineProperty(item, 'append', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function append() {
        var argArr = Array.prototype.slice.call(arguments),
          docFrag = document.createDocumentFragment();
        
        argArr.forEach(function (argItem) {
          var isNode = argItem instanceof Node;
          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
        });
        
        this.appendChild(docFrag);
      }
    });
  });
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);

Specification

Specification Status Comment
DOM
La definición de 'ParentNode.append()' en esta especificación.
Living Standard Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
append
Experimental
Chrome Soporte completo 54Edge Soporte completo 17Firefox Soporte completo 49IE Sin soporte NoOpera Soporte completo 39Safari Soporte completo 10WebView Android Soporte completo 54Chrome Android Soporte completo 54Firefox Android Soporte completo 49Opera Android Soporte completo 41Safari iOS Soporte completo 10Samsung Internet Android Soporte completo 6.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.

See also