ParentNode.append()

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]
ParentNode.append(...nodesOrDOMStrings) // returns undefined

引数

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

例外

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

要素の追加

let parent = document.createElement("div")
let p = document.createElement("p")
parent.append(p)

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

テキストの追加

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

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

要素とテキストの追加

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

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

ParentNode.append() はスコープが効かない

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

let 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

凡例

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

関連情報