この翻訳は不完全です。英語から この記事を翻訳 してください。

The ParentNode.append() method inserts a set of Node objects or DOMString objects after the last child of the ParentNode. DOMString objects are inserted as equivalent Text nodes.

Node.appendChild()との違い:

  • ParentNode.append() allows you to also append DOMString object, whereas Node.appendChild() only accepts Node objects.
  • ParentNode.append() has no return value, whereas Node.appendChild() returns the appended Node object.
  • ParentNode.append() can append several nodes and strings, whereas Node.appendChild() can only append one node.

構文

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

引数Parameters

nodes
A set of Node or DOMString objects to insert.

例外

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 Status Comment
DOM
ParentNode.append() の定義
現行の標準 初期定義.

ブラウザ互換性

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

凡例

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

See also

ドキュメントのタグと貢献者

このページの貢献者: isdh
最終更新者: isdh,