1. 開発者向けのウェブ技術
  2. Web API
  3. Element
  4. append()

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Element: append() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2018年4月以降、すべてのブラウザーで利用可能です。

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

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

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

構文

js
append(param1)
append(param1, param2)
append(param1, param2, /* … ,*/ paramN)

引数

param1, …, paramN

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

返値

なし (undefined)。

例外

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

仕様書

仕様書
DOM
# ref-for-dom-parentnode-append①

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告