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)
引数
例外
HierarchyRequestError
DOMException
-
階層内の指定された位置に新しいノードを挿入できない場合,つまり以下の条件のいずれかに該当する場合に発生します。
- 追加されたノードの 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