Element.append()

Element.append() メソッドは、一連の Node または DOMString オブジェクトを Element のの最後の子の後に挿入します。 DOMString オブジェクトは等価な Text ノードとして挿入されます。

Node.appendChild() との違いは次の通りです。

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

構文

js

append(...nodesOrDOMStrings)

引数

nodesOrDOMStrings

挿入する一連の Node または DOMString オブジェクトです。

例外

HierarchyRequestError DOMException

ノードが階層構造の中の指定された位置に挿入できなかったときに発生します。

例

要素の追加

js

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

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

テキストの追加

js

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

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

要素とテキストの追加

js

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

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

append メソッドはスコープが効かない

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

js

let div = document.createElement("div")

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

仕様書

Specification
DOM Standard
# ref-for-dom-parentnode-append①

ブラウザーの互換性

BCD tables only load in the browser

関連情報