Replacing text with <span> using javascript

Question

I need to replace each word in the textarea by a span with unique id. I need the code in JavaScript. I have tried creating a DOM element and inserting it in text area using the following code.

var s = document.createElement('span');
var text=document.createTextNode("inside tag");
s.appendChild(text);                
document.getElementById("t1").appendChild(s);

t1 is the is the id of my text area. The above code isn't giving any result.

Also, I tried another method:

document.getElementById("t1").innerHTML="<span>inside tag</span>";

innerHTML isn't working here.

What do I do?

document.getElementById("t1").value="<span>inside tag</span>"; — Pranav C Balan
– Pranav C Balan, Commented Nov 20, 2015 at 6:36
A <textarea> doesn't normally allow for child elements. Only text content (its value). The one exception is if it's set to be contenteditable. — Jonathan Lonowski
– Jonathan Lonowski, Commented Nov 20, 2015 at 6:39
@HarshitaLal Then create a minimal example so we can see what you have, because using just .value should work. — Spencer Wieczorek
– Spencer Wieczorek, Commented Nov 20, 2015 at 6:40
@RohitAzad: Please don't put random words in backquotes. It makes it harder to read. — ruakh
– ruakh, Commented Nov 20, 2015 at 6:40

Shahid Manzoor Bhat · Accepted Answer · 2015-11-20 06:59:04Z

2

It has to be the value property instead of the innerHtml because of the fact that value property is used for setting the value for input/form elements. innerHTML on the other hand is normally used for div, span, td and similar elements.

So as you are using a textarea you shall go with value property.

document.getElementById("t1").value = "Whatever the text/html you want to insert here";

answered Nov 20, 2015 at 6:59

Shahid Manzoor Bhat

1,3331 gold badge15 silver badges32 bronze badges

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

4 Comments

Harshita Lal Over a year ago

using .value prints "<span>inside tag</span>" as a string into the textarea rather than creating a span.

Shahid Manzoor Bhat Over a year ago

@HarshitaLal If you are trying to embed pure html within textarea the answer is no. It's not possible to create a span tag within textarea you can enter the HTML in string fromat only. The HTML <textarea> element represents a multi-line plain-text editing control.

Harshita Lal Over a year ago

Thanks for the answer. That was of great help.

Shahid Manzoor Bhat Over a year ago

@HarshitaLal You are welcome. You can mark this answer as the answer by clicking on it if it was of any help. Many Thanks

Long Nguyen · Accepted Answer · 2015-11-20 06:38:29Z

0

To change your value of text arena, you will have to do this:

document.getElementById('t1').value = '<span>inside tag</span>';

answered Nov 20, 2015 at 6:38

Long Nguyen

11.3k2 gold badges21 silver badges25 bronze badges

Collectives™ on Stack Overflow

Replacing text with <span> using javascript

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related