CharacterData: after() メソッド
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
after() は CharacterData インターフェイスのメソッドで、一連の Node オブジェクトまたは文字列を、このオブジェクトの親ノードの子リスト内の、このオブジェクト自身の直後に挿入します。
構文
js
after(...nodes)
引数
例外
HierarchyRequestErrorDOMException-
階層内の指定された位置に新しいノードを挿入できない場合，つまり以下の条件のいずれかに該当する場合に発生します。
- 追加されたノードの 1 つを挿入すると循環参照なる場合、つまり、そのノードの 1 つがこの
CharacterDataノードの祖先である場合です。 - 追加されたノードのいずれかが
DocumentFragment,DocumentType,Element,CharacterDataのいずれでもない場合。 - この
CharacterDataノードが実際にはTextノードであり、その親がDocumentである場合。 - この
CharacterDataノードの親がDocumentで、挿入するノードの一つがDocumentFragmentであり、その中に 1 つ以上のElementがある場合、またはText子を持つ場合。
- 追加されたノードの 1 つを挿入すると循環参照なる場合、つまり、そのノードの 1 つがこの
例
after() メソッドを使うと、新しいノードをこの CharacterData ノードの後に挿入することができます。
js
const h1TextNode = document.querySelector("h1").firstChild;
h1TextNode.after(" #h1");
h1TextNode.parentElement.childNodes;
// NodeList [#text "CharacterData.after()", #text " #h1"]
h1TextNode.data;
// "CharacterData.after()"
メモ:
現在のノードにテキストを追加したい場合は、 appendData() メソッドを使用すると現在のノードにデータを追加することができます。
仕様書
| Specification |
|---|
| DOM Standard # ref-for-dom-childnode-after① |
ブラウザーの互換性
BCD tables only load in the browser