html - Using javascript to alter span text dynamically and keeping the original text - Stack Overflow

admin管理员组

文章数量:1291147

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.

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.

• javascript
• html

Share Improve this question Follow edited Dec 20, 2010 at 15:34 Konerak 39.8k1212 gold badges101101 silver badges121121 bronze badges asked Dec 20, 2010 at 15:27 akshayakshay 7111 gold badge33 silver badges88 bronze badges 2

• 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 Commented Dec 20, 2010 at 15:29
• i just mentioned 2 possible ways 2 do it , and problem am facing with each approach – akshay Commented Dec 20, 2010 at 15:51

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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.

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;

If you are not using jquery :

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

If you are using jquery:

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

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

or

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

本文标签： htmlUsing javascript to alter span text dynamically and keeping the original textStack Overflow