CharacterData.after()

The CharacterData.after() method inserts a set of Node or DOMString objects in the children list of the CharacterData's parent, just after the CharacterData. DOMString objects are inserted as equivalent Text nodes.

Syntax

after(... nodes)

Parameters

nodes

A set of Node or DOMString objects to insert.

Exceptions

HierarchyRequestError DOMException

Thrown when the node cannot be inserted at the specified point in the hierarchy.

Examples

Inserting text in new nodes

The after() method allows you to insert new nodes after a CharacterData node.

const h1TextNode = document.getElementsByTagName('h1')[0].firstChild;
h1TextNode.after(" #h1");

h1TextNode.parentElement.childNodes
// NodeList [#text "CharacterData.after()", #text " #h1"]

h1TextNode.data;
// "CharacterData.after()"

Appending text to the current node

If you rather want to append text to the current node, the appendData() method lets you append to the current node's data:

const h1TextNode = document.getElementsByTagName('h1')[0].firstChild;
h1TextNode.appendData(" #h1");

h1TextNode.parentElement.childNodes;
// NodeList [#text "CharacterData.after() #h1"]

h1TextNode.data;
// "CharacterData.after() #h1"

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
after
54
17
49
No
39
10
54
54
49
41
10
6.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CharacterData/after