Javascript syntax?

I'm not even sure of how to name what I want. So let me explain it by giving an example.

While firefox uses textContent, other browsers supports the innerText property. By the way, please correct me if I use wrong terminology. Anyways, so far everything is ok. But I want something like the following:

document.getElementById(id).iText = "blablabla" 
//or
var x = document.getElementById(id).iText;
//where iText is something like:

if(e.innerText) return innerText;
else return textConten开发者_如何学Got;

I do not want to use a function for this stuff. Also, please tell me the name of this "thing", if exists, as I am not familiar with it.

---

If you need to refer to innerText or textContent a few times, you can do something like this:

// Check which is supported:
var textProp = "textContent" in document.body ? "textContent" : "innerText";

// And when you need it:
var text = document.getElementById("myId")[textProp];

---

In general, the things you want are called 'getters' (and for setting the text, 'setters'). For documentation, see eg. MDC

On DOM nodes, IE does not reliably support adding such properties (not before IE8, at least, see this MSDN doc). However, Webkit (Chrome) and Gecko (Firefox) seem to be happy to let you modify the DOM prototypes. Which leaves you with:

try {
    if (!('innerText' in HTMLElement.prototype)) {
        HTMLElement.prototype.__defineGetter__("innerText", function() { return this.textContent; });
    }
} catch (ex) {/*uh oh*/}

You could use analogous syntax to define a setter:

HTMLElement.prototype.__defineSetter__("innerText", function(newVal) { return this.textContent = newVal; });

While this may work, I would still highly recommend using a library of your choice (jQuery, Prototype, MooTools, YUI, whatever) for this kind of thing. Of course you can make stuff like this work all by yourself, but for most cases, your efforts are better spent on writing your actual application.

---

Embed jQuery and then simply use $('#' + id).text().

That's the only proper way. While JavaScript allows you to define properties which have a getter, extending host objects (and DOM nodes are host objects) may lead to undefined behaviour.

---

Not sure which "thing" you mean, but you can use a logical OR to retrieve the text:

var text = x.textContent || x.innerText;

This returns x.innerText if x.textContent is not defined (and x.textContent if it is defined). It is a very common shortcut.

Assigning is a bit more tricky and I'm not even sure if you can assign to these properties. However, if you can, then it would have the same effect as assigning to innerHTML (apart maybe from rendering HTML), namely replacing the whole content with the given string.
But innerHTML is supported in every browser and hence easier to use.

---

either do sth like

var x = elem.innerText || elem.textContent || "";

or simly use jquery and let it handle it for you

var x = $('myElement').text();