Using javascript to alter span text dynamically and keeping the original text

Question

I have a html page, inside which i have following code snippet, depending on which case we're following:

CASE 1)    <p> <span id ="xyz">  some code here  </span> </p>
CASE 2)    <p> <span id ="xyz">   </span> some code here </p>

Now in my javascript code I have to write values in span xyz dynamically. If I try to do get reference to span xyz by id and then try to alter its innerHTML, then the html already present in span xyz is lost.

If I keep extra code outside the span, it appears on new line due to some css effects. I cannot alter css due to some reasons.

Your question is not clear. One thing I will note: do not use the same "id" value on more than one element. (I can't even tell if that's what you're doing, however.) — Pointy, Dec 20 '10 at 15:29
i just mentioned 2 possible ways 2 do it , and problem am facing with each approach — akshay, Dec 20 '10 at 15:51

score 3 · Answer 1 · answered Dec 20 '10 at 15:31

3

You can just store the current value in a String, and then modify this string:

var mySpan = document.getElementById('xyz').innerHTML;
mySpan += ' and this gets added after the some code here';
document.getElementById('xyz').innerHTML = mySpan;

or faster and more shorthand,

document.getElementById('xyz').innerHTML = document.getElementById('xyz').innerHTML + ' new text after'; //to add text after the existing text
document.getElementById('xyz').innerHTML = 'your new text before ' + document.getElementById('xyz').innerHTML; //to add text before.

answered Dec 20 '10 at 15:31

Konerak

39,272
12
98
118

1

just a slight fix to this solution is that innerHTML is property and not a function. So you have to get rid of the parentheses and capitalize the HTML part. – Dan Dec 20 '10 at 15:33
@Dan thanks - jQuery's `html()` always makes me do that to old javascript :) – Konerak Dec 20 '10 at 15:35

score 1 · Answer 2 · answered Dec 19 '15 at 12:45

1

If you are not using jquery :

document.getElementById('xyz').innerHTML=   document.getElementById('xyz').innerHTML + "XYZ";

If you are using jquery:

 $("#xyz").append("xyz");

answered Dec 19 '15 at 12:45

Sundar Singh

654
5
15

dheerosaur · Answer 3 · 2010-12-20T15:52:33.350

1

You can append a new text node to span, if you want to keep the old text.

var newtext = document.createTextNode(" new text ");
var spanXyz = document.getElementById("xyz");
spanXyz.appendChild(newtext);

Refer these: createTextNode, appendChild

Edit: To add new text at the beginning, you can use something like

spanXyz.textContent = "new text " + spanXyz.textContent;

edited Dec 20 '10 at 15:52

answered Dec 20 '10 at 15:34

dheerosaur

14,736
6
30
31

+1: I like this way, but I would perhaps make a one-liner out of it: `document.getElementById("xyz").appendChild(document.createTextNode(" new text "));` – user113716 Dec 20 '10 at 15:39
Yeah, I was just spelling it out for the OP. – dheerosaur Dec 20 '10 at 15:45
thanks.I liked this approach, but the text i want to appent shold appear at begening of span not end.Eg if span consist of text B then i want to make it AB.This is just a eg.I actually have some html code as A and B – akshay Dec 20 '10 at 15:46

score 0 · Answer 4 · answered Dec 20 '10 at 15:31

0

document.getElementById('xyz').innerHTML = 'some code here' + 'dynamically code';

or

document.getElementById('xyz').innerHTML = 'dynamically code' + 'some code here' ;

answered Dec 20 '10 at 15:31

Pradeep Singh

3,582
3
29
42

Using javascript to alter span text dynamically and keeping the original text

4 Answers4

Linked