CharacterData: after() メソッド

Baseline 広く利用可能

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

もっと詳しく
完全な互換性情報を見る

after() は CharacterData インターフェイスのメソッドで、一連の Node オブジェクトまたは文字列を、このオブジェクトの親ノードの子リスト内の、このオブジェクト自身の直後に挿入します。

文字列は Text ノードとして挿入されます。文字列は Text() コンストラクターの引数として挿入されます。

構文

after(...nodes)

引数

nodes: 挿入する一連の Node または文字列です。

例外

HierarchyRequestError DOMException

階層内の指定された位置に新しいノードを挿入できない場合,つまり以下の条件のいずれかに該当する場合に発生します。

追加されたノードの 1 つを挿入すると循環参照なる場合、つまり、そのノードの 1 つがこの CharacterData ノードの祖先である場合です。
追加されたノードのいずれかが DocumentFragment, DocumentType, Element, CharacterData のいずれでもない場合。
この CharacterData ノードが実際には Text ノードであり、その親が Document である場合。
この CharacterData ノードの親が Document で、挿入するノードの一つが DocumentFragment であり、その中に 1 つ以上の Element がある場合、または Text 子を持つ場合。

例

after() メソッドを使うと、新しいノードをこの CharacterData ノードの後に挿入することができます。

const h1TextNode = document.querySelector("h1").firstChild;
h1TextNode.after(" #h1");
h1TextNode.parentElement.childNodes;
// NodeList [#text "CharacterData.after()", #text " #h1"]
h1TextNode.data;
// "CharacterData.after()"

メモ: 現在のノードにテキストを追加したい場合は、 appendData() メソッドを使用すると現在のノードにデータを追加することができます。