I am using javascript setAttribute for following to change 'lorem ipsum' to 'ing' in the following manner :

<span id="pop_title" name="pop_title" class="title01_mc10401 ff_1 fs_10 fc22 fsb">lorem ipsum</span>

Script:

function modifyDOM(){
  var elem_pop = document.getElementById("pop_title");
  elem_pop.setAttribute("value","ing");
}

When I inspect in firebug, its showing that the value attribute is added with ing, but its reflecting in the browser (I am using mozilla 3.0.5) What may be the issue ?? do i need to set different attribute ??

I am using javascript setAttribute for following to change 'lorem ipsum' to 'ing' in the following manner :

<span id="pop_title" name="pop_title" class="title01_mc10401 ff_1 fs_10 fc22 fsb">lorem ipsum</span>

Script:

function modifyDOM(){
  var elem_pop = document.getElementById("pop_title");
  elem_pop.setAttribute("value","ing");
}

When I inspect in firebug, its showing that the value attribute is added with ing, but its reflecting in the browser (I am using mozilla 3.0.5) What may be the issue ?? do i need to set different attribute ??

• javascript

Share Improve this question Follow edited Jul 22, 2010 at 11:20 Nick Craver 631k138138 gold badges1.3k1.3k silver badges1.2k1.2k bronze badges asked Jul 22, 2010 at 11:18 Kalpesh JainKalpesh Jain 40933 gold badges1010 silver badges1919 bronze badges 1

• <input/> tags display their value and don't display what's in them (as they're empty) - i.e. if you did this: <input type="text">Lorem ipsum</input> this would display nothing as <input/>s are not designed to show their contents. Most other elements, like <span>s show their contents, not their "value" attribute. – lucideer Commented Jul 22, 2010 at 12:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

There are two ways to do this (correctly). You can use this cross-browser method here:

elem_pop.appendChild( document.createTextNode('ing') );

The other way is to use elem_pop.textContent and/or elem_pop.innerText, but these unfortunately don't work cross-browser. IE only supports innerText, Firefox, Chrome only support textContent - Opera is the only one that supports both.

You could use elem_pop.innerHTML, HOWEVER be aware that innerHTML inserts HTML markup, NOT just text into the page. This means that it won't escape any special characters into entities. It also replaces any child nodes automatically and can destroy event listeners.

I'd remend the first (appendChild()) method, but if you want to use textContent/innerText you could place this at the top of your script:

HTMLElement.prototype.__defineGetter__('innerText', function(){ return this.textContent; });
HTMLElement.prototype.__defineSetter__('innerText', function(t){ this.textContent=t; });

That will give Firefox innerText support and you can use it all you like.

The span element does not have a value attribute. Try setting its innerHTML instead:

elem_pop.innerHTML = "ing";

Use .innerHTML instead here, like this:

function modifyDOM(){
  var elem_pop = document.getElementById("pop_title");
  elem_pop.innerHTML = "ing";
}

You can try it here. Setting the value attribute would be for something like an <input> element, when you want to replace the html within an element's tags, use .innerHTML instead.