Muchas veces me han preguntado y he visto a muchas personas en los foros hacer la pregunta: ¿Cómo puedo hacer trabajar la propiedad innerText en Firefox?
Es sabido que Firefox no soporta esta propiedad, por lo que la pregunta correcta sería: ¿hay alguna propiedad equivalente a innerText en Firefox?
La respuesta es Sí.
Firefox soporta la propiedad textContent, por lo que la repuesta a la pregunta que muchos se hacen es simple. Sólo debo chequear por la propiedad que soporte nuestro browser y de esa manera, usar la que corresponda.
Nota: Opera, Google Chrome, Safari y Maxthon tampoco soportan la propiedad innerText y tal como hace Firefox soportan la propiedad estandarizada por el W3C, textContent. Por lo que este truco nos permitirá tambien que nuestro código JavaScript trabaje en estos navegadores.
Veamos el código que debemos utilizar para que esto funcione:
<html>
<head>
<title>Ejemplo de código javascript que corre en todos los navegadores</title>
<script type="text/javascript">
function rutina() {
if (document.getElementById('elemento').textContent!=undefined)
document.getElementById('elemento').textContent="Texto cambiado, usando la propiedad textContent,
usada por Firefox, Google Chrome, Opera, Safari
y Maxthon";
else
document.getElementById('elemento').innerText="Texto cambiado, usando la propiedad innerText,
usada sólo por Internet Explorer";
}
</script>
</head>
<body>
<h3>Ejemplo de código javascript que corre en todos los navegadores</h3>
<span id="elemento" onclick="rutina()">
Este texto cambiará su contenido cuando haga click sobre él,
y esto funcionará en todos los navegadores</span>
</body>
</html>
Las Figuras 1 y 2, muestran la corrida de este código HTML en Internet Explorer:
 |
Figura 1 - El archivo HTML cargado en Internet Explorer, esperando que el usuario haga click
sobre el texto. |
 |
|
Figura 2 - El texto cambia, utilizando la propiedad innerText, utilizada sólo por IE. |
Las Figuras 3 y 4, muestran la corrida de este código HTML en Google Chrome:
 |
Figura 3 - El archivo HTML cargado en Google Chrome, esperando que el usuario haga click
sobre el texto. |
 |
|
Figura 4 - El texto cambia, utilizando la propiedad textContent, un estándar del W3C |
Nota: Si queremos evitar tener que chequear que propiedad soporta nuestro browser, podemos utilizar el siguiente código jQuery que trabaja en todos los browsers.
<html>
<head>
<title>Ejemplo de código javascript que corre en todos los navegadores, usando jQuery</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
</head>
<body>
<h3>Ejemplo de código javascript que corre en todos los navegadores, usando jQuery</h3>
<span id="elemento">Este texto cambiará su contenido cuando haga click sobre él,
y esto funcionará en todos los navegadores
gracias a jQuery.</span>
<script type="text/javascript">
$(document).ready(function() {
$("#elemento").click(function() {
$(this).text("Texto cambiado usando código jQuery, entendido por todos los navegadores.");
})
});
</script>
</body>
</html>
En las figuras 5 y 6, vemos la corrida de este programa que funciona en todos los navegadores:
 |
Figura 5 - El archivo HTML con jQuery cargado, esperando que el usuario haga click sobre
el texto |
 |
|
Figura 6 - El texto cambia en todos los navegadores, usando jQuery |
Para mayor información sobre jQuery, vea el artículo Introducción a jQuery