Cross-browser innerText for setting values

Question

Let's say I have the following code:

<html>
  <head></head>
  <body>
   <div id="d">some text</div>

  <script type="text/javascript">
    var d = document.getElementByid('d');
    var innerText = d.innerText || d.textContent;

    innerText = 'new text';
  </script>
  </body>
</html>

And I want to change text value for the div tag with id='d'. Unfortunately the block code above doesn't work and the text content doesn't change.

It works if do the following recipe:

if (d.innerText) d.innerText = 'new text';
else d.textContent = 'new text';

But I dont like the recipe above because it's not compact.

Have you any suggestions why the first approach doesn't work?

Why don't you put the second solution into a function with a parameter for the element and one for the string. Then you'd just have to do `setText(mydiv, "new text");` — Torsten Walter, Jul 25 '12 at 09:17
it is not `document.getElementByid` it should be `document.getElementById` `I` of `id` should be in capital. — Ahsan Khurshid, Jul 25 '12 at 09:29
`d[('innerText' in d) ? 'innerText' : 'textContent' ] = 'New text';` — Arkt8, Aug 24 '17 at 18:25

score 21 · Accepted Answer · answered Jul 25 '12 at 09:25

21

Instead of multiple assignments, you can grab the property and use that

var text = ('innerText' in d)? 'innerText' : 'textContent';
d[text] = 'New text';

answered Jul 25 '12 at 09:25

Gabriele Petrioli

191,379
34
261
317

This is a brilliant way of handling it, glad I stumbled across it. – Mar 26 '13 at 13:50

T.J. Crowder · Answer 2 · 2012-07-25T09:30:13.617

The first approach doesn't work because all it does is set the variable to the new value, it doesn't write the value to the element. The line

var innerText = d.innerText || d.textContent;

...sets the variable innerText to the value of the text property it finds, it's not a reference to the actual property itself.

You'll have to do the branch, e.g.:

var d = document.getElementById('d');
var msg = "new text";
if ("innerText" in d) {
    d.innerText = msg;
}
else {
    d.textContent = msg;
}

That feature-detects whether the browser uses innerText or textContent by looking for the existence of the property on the element (that's what the in operator does, check if an object has a property with the given name, even if that property is blank, null, undefined, etc.).

You can even write yourself a function for it:

var setText = (function() {
    function setTextInnerText(element, msg) {
        element.innerText = msg;
    }

    function setTextTextContent(element, msg) {
        element.textContent = msg;
    }

    return "innerText" in document.createElement('span') ? setTextInnerText : setTextTextContent;
})();

That does the feature-detection once, and returns a function any half-decent engine will inline for you.

Or alternately, if you want HTML markup in the message to be handled as markup (rather than literal text), you can just use innerHTML (which is consistent across browsers). But again, if you use innerHTML, markup will be processed which may not be what you want.

I find it useful to use a good JavaScript library to deal with these browser differences (and to provide a ton of useful further functionality), such as jQuery, YUI, Closure, or any of several others. Obviously there's nothing you can do with a library you can't do without one, it's just a matter of standing on the shoulders of people who've done a huge amount of work already. :-)

In this case, for instance, using jQuery the above would be:

$("#d").text("new text");

That's it.

Thanks for the reply but I need innerText. Ok I'll use the branch — Erik, Jul 25 '12 at 09:19
@Erik: Glad that helped. I explained how it works (the feature test) a bit more. — T.J. Crowder, Jul 25 '12 at 09:21
@Erik: *"Does YUI has a method innerText"* A cursory search of the documentation suggests [that yes, it does](http://yuilibrary.com/yui/docs/api/classes/DOM.html#method_setText). (I don't use YUI, but the docs are pretty easy to use.) — T.J. Crowder, Jul 25 '12 at 09:22
your code will not work because it has a typo `getElementByid` should be `getElementById` — Ahsan Khurshid, Jul 25 '12 at 09:23
@A.K: Well, it's a typo I inherited from the OP's code. :-) Fixed. — T.J. Crowder, Jul 25 '12 at 09:24

score 1 · Answer 3 · answered Aug 08 '14 at 10:35

1

d.appendChild(document.createTextNode("new text");

answered Aug 08 '14 at 10:35

humkins

9,635
11
57
75

score 1 · Answer 4 · answered Apr 12 '15 at 19:54

1

you can use textContent only & it will work in major browsers... (FF, Safari & Chrome)

var d = document.getElementById('d');
var msg = "new text";
d.textContent = msg;

answered Apr 12 '15 at 19:54

horacio

11
1

Cross-browser innerText for setting values

4 Answers4

Linked