Replacing text with 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?

A `` doesn't normally allow for child elements. Only text content (its `value`). The one exception is if it's set to be [`contenteditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable). — Jonathan Lonowski, Nov 20 '15 at 06:39
@HarshitaLal Then create a minimal example so we can see what you have, because using just `.value` should work. — Spencer Wieczorek, Nov 20 '15 at 06:40
@RohitAzad: Please don't put random words in backquotes. It makes it harder to read. — ruakh, Nov 20 '15 at 06:40
@ruakh Are you meaning to the OP (*@HarshitaLal*) about the `isn't`? — Spencer Wieczorek, Nov 20 '15 at 06:42
@SpencerWieczorek: The OP isn't who put the `isn't` in backquotes. See http://stackoverflow.com/posts/33820393/revisions. — ruakh, Nov 20 '15 at 06:42
@ruakh Oh, didn't notice that. Wasn't thinking someone would do that in an edit. They must of meant to do that to the `innerHTML`. — Spencer Wieczorek, Nov 20 '15 at 06:43
@SpencerWieczorek using .value prints "inside tag" as a string into the textarea rather than creating a span. — Harshita Lal, Nov 20 '15 at 06:53

score 2 · Accepted Answer · answered Nov 20 '15 at 06:59

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 '15 at 06:59

Shahid Manzoor Bhat

1,307
1
13
32

using .value prints "inside tag" as a string into the textarea rather than creating a span. – Harshita Lal Nov 20 '15 at 08:20
@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 element represents a multi-line plain-text editing control. – Shahid Manzoor Bhat Nov 20 '15 at 09:29
Thanks for the answer. That was of great help. – Harshita Lal Nov 20 '15 at 10:33
@HarshitaLal You are welcome. You can mark this answer as the answer by clicking on it if it was of any help. Many Thanks – Shahid Manzoor Bhat Nov 20 '15 at 11:19

score 0 · Answer 2 · answered Nov 20 '15 at 06:38

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 '15 at 06:38

Long Nguyen

11,075
2
18
25

Replacing text with using javascript

2 Answers2