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
– Tomalak, Commented May 5, 2009 at 9:15
I want to change the text inside parent and make it appear as plain text (ie, have the DOM replace < with <). — Tom
– Tom, Commented May 5, 2009 at 9:26

Tomalak · Accepted Answer · 2011-06-08 16:50:33Z

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 8, 2011 at 16:50

answered May 5, 2009 at 9:24

Tomalak

340k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Over a year ago

Perfect :) Just what i'm looking for

Peter · Accepted Answer · 2009-05-05 09:17:23Z

2

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#

answered May 5, 2009 at 9:17

Peter

14.6k15 gold badges73 silver badges112 bronze badges

Comments

Tom · Accepted Answer · 2009-05-05 09:31:20Z

2

parent.innerText = text;

answered May 5, 2009 at 9:31

Tom

7,29315 gold badges65 silver badges79 bronze badges

2 Comments

Tomalak Over a year ago

That's an alternative, of cause. I thought you were asking about text nodes specifically.

Tom Over a year ago

"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.

SridharKritha · Accepted Answer · 2022-11-22 12:08:24Z

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, 2022 at 12:08

SridharKritha

9,9192 gold badges60 silver badges45 bronze badges

Collectives™ on Stack Overflow

JavaScript TextNode update

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related