1. ウェブ
  2. Web API
  3. Element
  4. after()

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

View in English Always switch to English

Element: after() メソッド

Baseline
広く利用可能

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

Element.after() は、一連の Node オブジェクトまたは文字列をこの Element の親の子リストの、 Element の直後に挿入します。文字列は Text ノードと等価なノードとして挿入されます。

構文

js
after(node1)
after(node1, node2)
after(node1, node2, /* … ,*/ nodeN)

引数

node1, …, nodeN

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

返値

なし (undefined)。

例外

HierarchyRequestError DOMException

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

例

要素の挿入

js
let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);
let span = document.createElement("span");

p.after(span);

console.log(container.outerHTML);
// "<div><p></p><span></span></div>"

テキストの挿入

js
let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);

p.after("Text");

console.log(container.outerHTML);
// "<div><p></p>Text</div>"

要素とテキストの挿入

js
let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);
let span = document.createElement("span");

p.after(span, "Text");

console.log(container.outerHTML);
// "<div><p></p><span></span>Text</div>"

仕様書

仕様書
DOM
# ref-for-dom-childnode-after①

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

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

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