JavaScript TextNode update

Question

If I have a

var t = document.createTextNode(text)
parent.appendChild(t);

Is it possible to simply update the contents of t?

I would like to change the text inside the parent without using removeChild, createTextNode and appendChild. Why would I need this instead of just using innerHTML? Because I don't want to update the contents of the element with HTML code and the text may contain special characters, such as < or & which should be parsed by TextNode's DOM methods.

Thanks,
Tom

Do you want to display actual HTML or really just plain text? — Tomalak, May 05 '09 at 09:15
I want to change the text inside parent and make it appear as plain text (ie, have the DOM replace < with <). — Tom, May 05 '09 at 09:26

Tomalak · Accepted Answer · 2011-06-08T16:50:33.897

11

Be aware that adjacent text nodes are collapsed into one (since there is really no way to distinguish two adjacent text nodes).

The contents of a text node can be updated using it's nodeValue property (see MDC).

Since a text node by it's very definition cannot contain any markup, there is no innerHTML property.

edited Jun 08 '11 at 16:50

answered May 05 '09 at 09:24

Tomalak

332,285
67
532
628

Perfect :) Just what i'm looking for – Alex Sep 15 '09 at 03:38

score 2 · Answer 2 · answered May 05 '09 at 09:17

If you keep the instance of the TextNode object (t in your example code) then you can change the content using various functions like replaceData(), substringData(), etc..

See this page for a nice reference: http://msdn.microsoft.com/en-us/library/ms535905(VS.85).aspx#

score 1 · Answer 3 · answered May 05 '09 at 09:31

1

parent.innerText = text;

answered May 05 '09 at 09:31

Tom

6,991
13
60
78

That's an alternative, of cause. I thought you were asking about text nodes specifically. – Tomalak May 05 '09 at 09:41
"I would like to change the text inside the parent" probably wasn't specific enough to say that I don't care how, I just want something very simple that will use the DOM to escape HTML. – Tom May 05 '09 at 10:32

score 0 · Answer 4 · answered Nov 22 '22 at 12:08

0

Below example code overwrites the "Old Value" of the text node with the "New Value".

const textNode = document.createTextNode("Old Value");
parent.appendChild(textNode);

textNode.nodeValue = "New Value";

answered Nov 22 '22 at 12:08

SridharKritha

8,481
2
52
43

JavaScript TextNode update

4 Answers4