Using the innerText Property in Firefox
22 09 2005I’ve read on different forums questions of people asking how they can make the innerText property work in Firefox. Many have suggested to use the innerHTML property instead, but that would not be useful because, obviously, the HTML tags would be either rendered or displayed (an example of the latter would be if we want such text to be displayed in a textarea or text field) giving undesired effects.
Well, in short, Firefox does not support the innerText property. Instead, it supports the textContent property.
So, you could ‘sniff’ what browser the user is using and use the correct property accordingly.
So, you could check for the browser’s feature support to use the correct property accordingly (this is better than sniffing 
)
Example (updated):
if(document.all){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
That’s it. Hope it helps
J
Addendum:
See also: The textContent and innerText Properties. This post will help you to make the innerText property work in Safari too
–
Thanks… I was trying to use innerText (actually reading it and it wasn’t getting read) and I googled for “firefox” and “innerText” and found this!
Glad I can help
Googled aswell, cheers for the help (although I wish the javascript console said something).
Thanks a lot. regard phoenix snake.. ^^
I *love* it when the answer is the first Google hit. Great job!
Thanks, you saved the day and with such a simple solution also. I’ll be using this for awhile.
Awesum! This was driving me nuts.
Is it just me – I’m so tired of Firefox’s lack of functionality – yes, you can make nice webpages and very rudimentary applications, but you can’t make applications like you can with IE. And thus the academically inspired browser will lose to the pragmatic one. Never-the-less Firefox is an awesum brower and I wouldn’t want to create web pages without it.
Cheers.
You don’t actually need the if.
document.getElementById(‘element’).innerText = “my text”;
document.getElementById(‘element’).textContent = “my text”;
works fine
To Wayne,
Yeah, since the browser would “ignore” the one that doesn’t support but, at least to me, doesn’t make sense to write something like that. It would be like writing:
ro = new ActiveXObject("Microsoft.XMLHTTP");
ro = new XMLHttpRequest();
and let the browser deal with the one that supports… and as a good programming practice, I’d suggest to always check for the browser’s feature support because there is no need to execute both lines when you can check which is the appropriate one. Additionally, although I haven’t tested it yet, I bet that writing the code without using the if statement, the Firefox JavaScript console will give you an error like “object does not support the innerText property” or something similar.
An sniffing alternative would be:
var elem = document.getElementById(‘element’);
if (typeof elem.textContent != “undefined”)
elem.textContent = “my text”;
else
elem.innerText = “my text”;
Thanks Matthias,
I find this approach interesting
But since
typeof()is a method, I’d put the element and its property inside parenthesis (otherwise, it’ll give you an error), like so:if(typeof(elem.textContent) != "undefined"){ ....Nice!
I used this instead…
var txt = foo.innerText || foo.textContent;
Working for me on my current Big Three: IE, Firefox and Safari.
I found what seems to be the W3C recommended way of doing this at
http://developer.mozilla.org/en/docs/Migrate_apps_from_Internet_Explorer_to_Mozilla
To set the text, use:
element.appendChild(document.createTextNode(‘text’));
This worked for me in IE and Firefox.
Getting the text seems to be:
element.firstChild().nodeValue();
though I have not had an opportunity to test it.
Although is another way to accomplish this, those methods are to traverse the DOM tree which is something I would use when manipulating XML files.
textContext is only good for one node.
textContext is still not equal to innerText.
1, it doesn’t convert nbsp to space.
2, It doesn’t insert line break.
Alex,
There is no such property as textContext, did you mean textContent?
“textContext is only good for one node.”
So it is innerText.
“textContext is still not equal to innerText”
textContentis the non IE equivalent to innerText.1, it doesn’t convert nbsp to space.
2, It doesn’t insert line break.
No, of course it doesn't... nor does innerText. However, the innerHTML property does.
Like I'm explaining in my post, if you'd use
innerHTMLthe HTML code will be rendered as and<br>would in any browser that supports theinnerHTMLproperty (i.e. FX and IE).Useful post – 4th result on google.
Echo Comment 17! Thanks!
Woooooooooowwwwww thx you saved my day
lifesaver…
fwiw, I use this and it’s golden:
var elem = document.getElementById(id);
if (elem.textContent) elem.innerHTML = elem.textContent;
else elem.innerHTML = elem.innerText;
“So, you could check for the browser’s feature support..”
That’s not what you’re doing in your given example
. Checking for support for ‘document.all’ is pretty much as useless as checking the user agent, in that a browser could support document.all and not support innerText. The correct way to do it would be to check for the existence of the attribute ‘innerText’ or ‘textContent’ and acting accordingly.
@Paul:
And how many browsers that support document.all and not innerText do you know?
The two browsers that I know that support document.all and innerText are IE and Opera (go to http://www.coderlab.us/samples/itcTest.html to test it out, if you wish).
Matthias Miller, in comment #10, gives a good example of what you’re suggesting, but instead of checking for the existance of the innerText attribute, he’s checking for the existance of the textContent attribute.
Thanks for your comment
Cheers!
Yes, it helps me a lot.
thank you so much.
But, just want to mention, the IE doesn’t support .textContent.
thanks a lot,
on IE7 Beta 2, it seems that innerText doesn’t work anymore, instead, you can use text
var elem = document.getElementById(’element’);
if (typeof(elem.text) != ‘undefined’)
alert(elem.text);
else if (typeof(elem.textContent) != ‘undefined’)
alert(elem.textContent);
else if (typeof(elem..innerText) != ‘undefined’)
alert(elem.innerText);
@devil,
Thanks! Great contribution
What perfect timing Just when i needed the code!! Also Naruto Rocks =D but we all know itachi is sooo much better.
Thanks again
textContent is part of the w3 spec, apparently not innerText. Surprise.
http://www.w3.org/TR/DOM-Level-3-Core/core.html
I havent use text property, i dont think we need to make it this complicated, its really very simple, we can use both properties “innertext” and “textcontent” ,IE supports “innertext” so it will ignore “textcontent” propetrty and Mozilla Firefox supports “textcontent” so it will ignore “innertext”, just as simple as that.
Here is an example:
document.getElementById(‘element’).textContent = ‘Gateway’;
document.getElementById(‘element’).innerText = ‘Gateway’;
And this code works in IE7 also.I hope this will help you all.
@Arun
Why would writing an if statement to check what property to use is to make this ‘complicated’?
Just writing the properties and let the browser handle the one it supports is not a good programming practice. Someone (comment #8) suggested the same. Please see my answer to that (comment #9).
I have tried all these methods and finally i have used my method, i have implemented it and its working fine, and you need to test or implement your method first , only then you can draw any conclusion, so please first implement your method.
@Arun:
Well, if it works for you, good. Besides, I didn’t say it wouldn’t work, I just said is bad practice to code like that. If you’re happy coding like that, knock yourself out. After all, like you said, is YOUR method.
Okay, obviously you are falling into doing the same thing you are, let’s say, accusing me of: presumption.
You’re presuming that I just post something without even testing it. Well, obviously I have tested it. That’s why I AM posting it. If you tried these methods and didn’t work for you, then you might have done something wrong. However, if you tried them, they did work and still you decided to use YOUR method, cool! Just keep writing your code that way then. But, I still think is bad programming practice.
In conclusion, like my C++ teacher used to tell us back in college: “In programming there’s always more than one way to get the same results. The more efficient, the better”. I, for one, will keep using the way (method) I find to be more efficient. I guess you’ll do the same.
No Buddy i have not done anything wrong, i tried all these methods on IE7 and (document.all) does not work in IE7 thats why i told you to first implement your method.I am more than willing to learn new and more efficient techniques of doing programming but if that techniques work in all conditions.So i am not accusing you, its just that your method does not work in IE7 , please check if you dont beleive me, and happy coding.We all are here to share our knowledge and ideas.
@Arun
Well, there was obviously a misunderstanding. To begin with, you could have been more specific and said that this method doesn’t work on IE 7 (see comment #30). Since you didn’t mention a specific version of the browser, I thought you presumed that I didn’t test this method at all before posting this article. Hence, the answer I gave you.
I admit that I haven’t tested this on IE 7 because, well, I haven’t installed it on my computer yet (shame on me?). Devil (comment #24) apparently has and he already shared the results with us in his comment.
By the way, if you haven’t, I invite you to read my other article: The textContent and innerText Properties. Perhaps you’ll find something new there?
Happy coding to you too and thank you for your comments.
textContent only works for setting the textarea text. For reading, it’s not working for me. I’m using Firefox 1.5.0.6. I can use ‘value’ to read the text of a textarea, but it converts all consecutive spaces to one space. For exampe, “a b” becomes “a b”. That doesn’t happen in IE. What am I missing?
@Waleed,
You’re not missing anything. Firefox is rendering the value of your textarea as it should. It will ignore those extra spaces unless you use
which is, as I’m sure you know, an entity used to represent a non-breaking space… a standard space.Keep in mind that when the browser is rendering the HTML, every blank space will be ignored. That’s the same thing as if you’d write, for instance:
What will be rendered by the browser is: once upon a time…
If you want it to look like:
then you’d need (or your users) to type
as many times as needed. Also, in your code, you’d need to useinnerHTMLinstead. I have an example for you if you wanna try it yourself.Now, why IE is rendering the spaces? I don’t know.
I hope this explanation helped you. If you still have questions, please consider using the forum instead. I have a post explaining why.
Cheers!
This code helped me. Thank u very much.
great thanks for this and thanks for google!
Can I confirm this? Is it true that the release version of IE7 will not support document.all? It seems as though such a change would break thousands of working web apps that depend on document.all as a way to recognize IE. Not that it’s the best way to do it, but that method has been accepted and implemented as standard practice for years. Thanks very much for any input.
@Mark.
I’m trying to confirm this myself. However, I don’t believe they will stop supporting document.all.
My guess is that if they were planning to do it, they would’ve done it by now (IE 7 beta 3 is their final beta release).
If I can confirm they will keep supporting document.all, I’ll add an update here on this reply.
Best!
The original solution works great as is in FX, IE6, and IE7 RC1.
Also, I agree with Dolfint in that executing all variants of code in order to satify all browsers is absolutely BAD programming practice. Doing so is purposely placing errors in your code and considered sloppy, lazy coding.
thanks dude!!!!
thx!!! Great trick!
I like the following solution. It allows much cleaner code IMO:
//Emulate innerText on Firefox
if (typeof HTMLElement != 'undefined' && typeof HTMLElement.prototype.__defineGetter__ == 'function'){
HTMLElement.prototype.__defineGetter__("innerText", function () {
return this.textContent;
});
}
PS: I hope the ‘code’ tags work.
@Zecc
Thanks for your contribution. Though, in my opinion, this solution is not more clean but ‘complex’. Nonetheless, it’s just another way to do it. *thumbs up*
No, the ‘code’ tags don’t work, so I just reformatted the code manually.
Thanks alote for this infomation.
Well, yes, it is a bit more complex on initialization.
The point is that you can then simply use “e.innerText” everywhere you want, knowing it is being redirected to textContext on Firefox. That’s what I meant with cleaner code.
Actually I don’t know if you have to define a setter too, because I didn’t need one. But you probably have to, yeah.
Yah! textContent property worked for me. thanks a lot.
Thanks a lot, this helped!
Super! Made a shortcut in my problem! Keep on truckin’
Thanks to you and Google
My compliments to the blogger. This got me out of a jam!
Man I see that u saved a lot of people. Cheers. It’s nice to find such stuff without the need to … um… learn browser specific code and stuff
. Thanks again.
We’re still reading your post. Thanks for the info.
Hey.. Thanks for the post.
Thanks man! This really helps!
Thank you this was very helpful!!!!!!!!!!!!!!!
Super!!!!!! Thanks a lot….Really helped
your article helps!!
thanks a lot.
Googled as well.
GOOGLE RULES
been pulling my hair out trying to figure out what was going, then found the innertext the problem….found this article and WALAHH! Thanks for posting the article
Thanks
Just what I was looking for,
And, I know the first commenter, Nola, above. What a small world!
Happy New Year,
Jonathan
@Jonathan,
A small world indeed.
Happy New Year to you too!
I found this other method elsewhere…
if(document.all)
{
// has innerText feature
}
else
{
// does not have innerText feature…
// use textContent instead
}
which is better?
dangit. meant to post that in another thread. sorry.
@Jesse,
It’s alright. I would recommend to use the other one because it’s compatible with Safari and Konqueror. You can definitelly use this function, but it won’t work in these two browsers.
In other words, an improved and efficient ‘version’ of the code presented on this page, is the one presented on the The textContent and innerText Properties page.
Hope this helps.
Zecc’s methos is obviously the clean one (to check for one property each time you want to use another is just not good), but not optimal since it entails a compatibility layer. This kind of functionality should be encapsulated anyway, beginning with something like:
// must be onload, so that document.body exists
if(typeof document.body.innerText == ‘undefined’)
function ct(text, elm){elm.textContent=text}
else
function ct(text, elm){elm.innerText=text}
and then only call
ct(aText, anElm);
anytime you need it.
Browsers without document.body, innerText or textContent should be ignored, anyway. W3C standards have been out there long enough that at least their basics should be supported.
Antonio,
First off, Thank you for your comment.
Well, I think otherwise. I’m not saying Zecc’s method is not good, but that’s a method I personally wouldn’t use unless I have already deployed a website for which I would need to make the code more cross-browser compatible. Otherwise, I don’t see a specific reason why you’d have to define the
innerTextproperty for Firefox other than ‘saving’ you from writing a few lines of code in your project (which is fine too).In other words, the simpler the code, the better.
You say:
Why is ‘just not good’? without an explanation, saying ‘is just not good’ is just not good, because it doesn’t tell me anything. I’m more likely to understand your point of view and say “oh, that makes sense” if you actually explain why.
You said:
Granted, and since you’re posting this comment on this article, and telling me the above, I’m assuming you haven’t read my other article. There, I’m doing something similar to what you’re suggesting in your code above.
By the way, why are you defining 2
ct()functions inside anif()statement? I don’t find it efficient to write two function definitions when that can be done in one, especially for something so simple; besides, you writeif()statements inside function definitions, not the other way around. Like so:function ct(aText, anElm){ if(typeof document.body.innerText == 'undefined'){ elm.textContent = aText; } else{ elm.innerText = aText; } }Thanks very much for you code,
it saved me lot of time!!!!!!!
Thanx for the help…..
Thanks to all. Matthias, great shortcut!
what about this:
myString = (myElement.textContent) ? myElement.textContent : myElement.innerText;
it works ok in IE and Firefox for me.
IF YOU WERE HERE, I WOULD KISS YOU. THANKS FOR POSTING THIS SOLUTION.
document.getElementById(‘myElement).firstChild.nodeValue is a bit more standards compliant
First Yahoo response also searchng for ‘firefox’ and ‘innertext’
I said to Harry that magic doesn’t work. So we googled and found your page. Thank you, it helped us
Great solution! This was my 3rd hit thru Google, but ran different searches to handle.
Regarding the omission of the IF
This would likely break in the next browser version. As soon as one browser adopts the function of the other. (whichever is more popular, or adopted by the WC3 or whatever)
option_object.text = “Works on FireFox and Internet Explorer”;
Alex, I believe I tried that once but it didn’t work for me. I’ll try it once more and if it works, then I might’ve done something wrong before.
Thanks for your comment.
Thanx for the solution!
p.s.: i hate Mozilla… Why implement .innerText with other alias ? To prove that they are unique yet another time ? :/ That’s beyond my understanding…
Constantine,
innerTextis not a standard property, it’s a Microsoft proprietary property. However,textContentis part of the Document Object Model Core.Mozilla is more standards compliant than MS is, so… they’re not trying to ‘prove’ they’re unique in anyway but to follow standards as much as possible.
.value always works
Hi, Juan,
I’ve just found your blog while browsing the Web, and guess what, I see that I’ve made a contribution before! And I think I’ve been misunderstood and that my points are important, so I’ll address them from here since it seems the original won’t take comments anymore.
First of all, I didn’t mention thank you properly the first time, I didn’t
I wrote the following (on harmonising e.innerText and e.textContent):
(A method which makes innerText available in Firefox) is obviously the clean one (to check for one property each time you want to use another is just not good), but not optimal since it entails a compatibility layer. This kind of functionality should be encapsulated anyway, beginning with something like:
// must be onload, so that document.body exists
if(typeof document.body.innerText === ‘undefined’)
function setText(text, elm) { elm.textContent=text }
else
function setText(text, elm) { elm.innerText=text }
and then only call
setText(aText, anElm);
anytime you need it.
And you objected that:
Why is ‘just not good’ (to check for one property each time you want to use another)? without an explanation, saying ‘is just not good’ is just not good, because it doesn’t tell me anything. I’m more likely to understand your point of view and say “oh, that makes sense” if you actually explain why.
The answer is, I didn’t explain it because I thought it was self evident. I see it isn’t, since almost nobody thinks of it. The reason is that it’s inefficient to have a check each of the thousand times you want to use a functionality, especially if it’s completely unnecessary. Someone thought of it and kept a cache of the check in a variable, and checks the variable instead. That’s maybe marginally better in terms of performance, but the matter is that the check needs to be done only *once*.
*That* is why I put the check *outside* the function definition: if you support innerText, you’ll have one function; if you support textContent, you’ll have the other one. And from that moment on, your webpage won’t spend a nanosecond more deciding what code to run. Nor is the alternate path kept in memory.
This may seem like a little thing, but it’s a big one. Javascript needs such checks in many places, and a single filling of a box with small elements may need hundreds of calls to code which differs between browsers. Clearly the solution is not to make the check every time. Rather, use the check while you define your functions, and end up with only those you need. Slimmer and faster.
Thank you, Antonio.
I definitely believe any contribution is valuable and yours is no exception. I’m all for efficiency and your explanation is important.
I’ll keep your comment temporarily here, when I have a chance, I’ll move it to its right place and comment in more depth there.I moved your comment to it’s respective post. I will open comments again and keep them open for a short time just in case you want to comment again. I closed comments on this post because it was getting a lot of spam…
I’ll be commenting shortly.Just to clarify, I’m the type of person that if you tell me “this color is green”, I always want to know how come. If you tell me, “because is green, it’s a color”, it doesn’t tell me anything, but if you tell me something like “It’s green because it’s a combination of yellow and blue”, then I’ll feel good because I learned a new thing. That’s why I said “I’m more likely to understand your point of view and say “oh, that makes sense” if you actually explain why.”
Okay, you said:
And I agree, we shouldn’t check that every time we call the function; that’s why, like I said in one of my previous replies to you, in my other article, I’m checking this when the page loads and keep the value in a variable:
var hasInnerText = (document.getElementsByTagName("body")[0].innerText != undefined) ? true : false;And use it accordingly:
function SetText(text, elm){ if(!hasInnerText){ elm.textContent = text; } else{ elm.innerText = text; } }The way you and I do it is different but I think the idea is similar (if not the same).
Now, there’s one thing that I don’t agree with you, if I understand what you said well, that is. I’ll quote them together because I think they’re related:
It seems you’re thinking about this as if it the check was made on the server side. If this was server side scripting, then I would agree with you entirely; however, the check won’t be performed hundreds, much less thousands of times since it’s ran locally… on a single browser at a time. True, the page will be served thousands of times, but JavaScript won’t be ran till the browser loads the page… And I doubt you’d serve a page with hundreds of checks of this type.
Best!
Tnx!!!
I believe your fears regarding document.all are coming true… albeit slowly… isn’t it better to use getElementById or other detection in some form?
Z,
Do you mean using getElementById to detect if innerText is supported? If that’s so, then no. Using getElementById is not good since all browsers support it and it’s just not correct.
In my other article, I’m using another method to check if the innerText property is supported. You might want to check it out.
Oh Mannnnnn….Thanx a BILLION !!! All this while i was getting bogged down by using .childNodes[1].childNodes[0].nodeValue and so on….The childNodes were really pesky little children !! Thanx again !!
Hi !
Thanks, It solved my problem temporarily and looking forward..
.