ParentNode.append()

The ParentNode.append() メソッドは、Node オブジェクト または DOMString オブジェクトのセットを ParentNode の最後に追加します。DOMString オブジェクトはText ノードと同等に挿入されます。 

Node.appendChild()との違い:

  • ParentNode.append() は DOMString も追加することができますが、Node.appendChild() はNode オブジェクトのみを受け付けます。
  • ParentNode.append() は戻り値を持っていませんが、Node.appendChild() は追加されたNode オブジェクトを返します。
  • ParentNode.append() は複数のノードや文字列を追加することができますが、Node.appendChild() 一つのノードだけしか追加することができせん。

構文

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

引数

nodes
追加する Node または DOMString オブジェクトのセット

例外

  • HierarchyRequestError: ノードは階層の特定の箇所に追加させることができません。

要素の追加

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

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

テキストの追加

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

console.log(parent.textContent); // "Some 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() はスコープできない

append() メソッドは with ステートメントの中ではスコープされません。詳しくは Symbol.unscopables をご覧ください。

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

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

Polyfill

append() メソッドはInternet Explorer 9 以上であれば以下のコードでポリフィルを当てることができます。

// 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]);

仕様

仕様 状況 コメント
DOM
ParentNode.append() の定義
現行の標準 初期定義.

ブラウザ互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
append
実験的
Chrome 完全対応 54Edge 完全対応 17Firefox 完全対応 49IE 未対応 なしOpera 完全対応 39Safari 完全対応 10WebView Android 完全対応 54Chrome Android 完全対応 54Firefox Android 完全対応 49Opera Android 完全対応 41Safari iOS 完全対応 10Samsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報