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() の定義
現行の標準 初回定義

ブラウザーの互換性

No compatibility data found for api.ParentNode.append.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

関連情報