'innerText' funciona en IE, pero no en Firefox

Tengo un código JavaScript que funciona en IE que contiene lo siguiente:

myElement.innerText = "foo";

Sin embargo, parece que la propiedad 'innerText' no funciona en Firefox. ¿Hay algún equivalente de Firefox? ¿O hay una propiedad de navegador cruzado más genérica que se puede usar?

Firefox utiliza la propiedad textContent compatible con W3C .

Supongo que Safari y Opera también admiten esta propiedad.

Actualización : escribí una publicación de blog detallando todas las diferencias mucho mejor.

Firefox usa el estándar W3C Node::textContent, pero su comportamiento difiere "levemente" del del propietario de MSHTML innerText(copiado también por Opera, hace algún tiempo, entre docenas de otras características de MSHTML).

En primer lugar, la textContentrepresentación de espacios en blanco es diferente de innerTextuno. En segundo lugar, y más importante, textContent incluye todo el contenido de la etiqueta SCRIPT , mientras que innerText no.

Solo para hacer las cosas más entretenidas, Opera, además de implementar el estándar textContent, decidió agregar también MSHTML, innerText pero lo cambió para que actuaratextContent , es decir, incluir contenidos SCRIPT (de hecho, textContenty innerTexten Opera parecen producir resultados idénticos, probablemente solo se alias entre sí) .

textContentes parte de la Nodeinterfaz, mientras que innerTextes parte de HTMLElement. Esto, por ejemplo, significa que puede "recuperar" textContentpero no innerTextdesde nodos de texto:

var el = document.createElement('p');
var textNode = document.createTextNode('x');

el.textContent; // ""
el.innerText; // ""

textNode.textContent; // "x"
textNode.innerText; // undefined

Finalmente, Safari 2.x también tiene una innerTextimplementación con errores . En Safari, innerTextfunciona correctamente solo si un elemento no está oculto (vía style.display == "none") ni huérfano del documento. De lo contrario, innerTextda como resultado una cadena vacía.

Estaba jugando con la textContentabstracción (para solucionar estas deficiencias), pero resultó ser bastante complejo .

Su mejor opción es definir primero sus requisitos exactos y seguir desde allí. A menudo es posible simplemente quitar las etiquetas innerHTMLde un elemento, en lugar de tratar con todas las posibles textContent/ innerTextdesviaciones.

Otra posibilidad, por supuesto, es recorrer el árbol DOM y recopilar nodos de texto de forma recursiva.

Si solo necesita configurar el contenido de texto y no recuperarlo, aquí hay una versión DOM trivial que puede usar en cualquier navegador; no requiere la extensión IE innerText o la propiedad DOM Level 3 Core textContent.

function setTextContent(element, text) {
    while (element.firstChild!==null)
        element.removeChild(element.firstChild); // remove all existing content
    element.appendChild(document.createTextNode(text));
}

jQuery proporciona un .text()método que puede usarse en cualquier navegador. Por ejemplo:

$('#myElement').text("Foo");

Según la respuesta de Prakash K, Firefox no admite la propiedad innerText. Por lo tanto, simplemente puede probar si el agente de usuario admite esta propiedad y proceder en consecuencia de la siguiente manera:

function changeText(elem, changeVal) {
    if (typeof elem.textContent !== "undefined") {
        elem.textContent = changeVal;
    } else {
        elem.innerText = changeVal;
    }
}

Una línea realmente simple de Javascript puede obtener el texto "no etiquetado" en todos los navegadores principales ...

var myElement = document.getElementById('anyElementId');
var myText = (myElement.innerText || myElement.textContent);

Tenga en cuenta que la Element::innerTextpropiedad no contendrá el texto que ha estado oculto por el estilo CSS " display:none" en Google Chrome (y también eliminará el contenido que ha sido enmascarado por otras técnicas de CSS (incluido el tamaño de fuente: 0, color: transparente y algunos otros efectos similares que hacen que el texto no se represente de manera visible).

También se consideran otras propiedades CSS:

• Primero, el estilo "display:" de los elementos internos se analiza para determinar si delimita un contenido de bloque (como "display: block", que es el valor predeterminado de los elementos de bloque HTML en la hoja de estilo integrada del navegador, y cuyo comportamiento no ha sido anulado por tu propio estilo CSS); Si es así, se insertará una nueva línea en el valor de la propiedad innerText. Esto no sucederá con la propiedad textContent.
• También se considerarán las propiedades CSS que generan contenidos en línea: por ejemplo, el elemento en línea <br \>que genera una nueva línea en línea también generará una nueva línea en el valor de innerText.
• El estilo "display: inline" no causa nueva línea en textContent o innerText.
• El estilo "display: table" genera nuevas líneas alrededor de la tabla y entre las filas de la tabla, pero "display: table-cell" generará un carácter de tabulación.
• La propiedad "posición: absoluta" (utilizada con display: block o display: inline, no importa) también hará que se inserte un salto de línea.
• Algunos navegadores también incluirán una separación de espacio único entre tramos

Pero Element::textContentaún contendrá TODOS los contenidos de elementos de texto interno independientemente del CSS aplicado, incluso si son invisibles. Y no se generarán nuevas líneas o espacios en blanco adicionales en textContent, que simplemente ignora todos los estilos y la estructura y los tipos de elementos internos en línea / bloqueados o posicionados.

Una operación de copiar / pegar usando la selección del mouse descartará el texto oculto en el formato de texto sin formato que se coloca en el portapapeles, por lo que no contendrá todo lo que contiene textContent, sino solo lo que está dentro innerText(después de la generación de espacios en blanco / nueva línea como se indicó anteriormente) .

Ambas propiedades son compatibles con Google Chrome, pero su contenido puede ser diferente. Los navegadores más antiguos todavía se incluían en innetText, todo lo que ahora contiene textContent (pero su comportamiento en relación con la generación de espacios en blanco / líneas nuevas era inconsistente).

jQuery resolverá estas inconsistencias entre los navegadores utilizando el método ".text ()" agregado a los elementos analizados que devuelve mediante una consulta $ (). Internamente, resuelve las dificultades al mirar el DOM HTML, trabajando solo con el nivel de "nodo". Por lo tanto, devolverá algo que se parece más al contenido de texto estándar.

La advertencia es que este método jQuery no insertará espacios adicionales o saltos de línea que puedan ser visibles en la pantalla causados ​​por subelementos (como <br />) del contenido.

Si diseña algunos scripts para la accesibilidad y su hoja de estilo se analiza para la representación no auditiva, como los complementos utilizados para comunicarse con un lector Braille, esta herramienta debe usar el contenido de texto si debe incluir los signos de puntuación específicos que se agregan en tramos con estilo "display: none" y que normalmente se incluyen en las páginas (por ejemplo, para superíndices / subíndices), de lo contrario, el texto interno será muy confuso para el lector Braille.

Los textos ocultos por los trucos CSS ahora son generalmente ignorados por los principales motores de búsqueda (que también analizarán el CSS de sus páginas HTML, y también ignorarán los textos que no tienen colores contrastantes en el fondo) usando un analizador HTML / CSS y la propiedad DOM "innerText" exactamente como en los navegadores visuales modernos (al menos este contenido invisible no se indexará, por lo que el texto oculto no se puede usar como un truco para forzar la inclusión de algunas palabras clave en la página para verificar su contenido); pero este texto oculto todavía se mostrará en la página de resultados (si la página aún estaba calificada del índice para ser incluida en los resultados), utilizando la propiedad "textContent" en lugar del HTML completo para eliminar los estilos y scripts adicionales.

SI asigna texto sin formato en cualquiera de estas dos propiedades, esto sobrescribirá el marcado interno y los estilos aplicados (solo el elemento asignado mantendrá su tipo, atributos y estilos), por lo que ambas propiedades contendrán el mismo contenido . Sin embargo, algunos navegadores ya no respetarán la escritura en innerText, y solo le permitirán sobrescribir la propiedad textContent (no puede insertar marcado HTML al escribir en estas propiedades, ya que los caracteres especiales HTML se codificarán correctamente usando referencias de caracteres numéricos para aparecer literalmente , si luego lee la innerHTMLpropiedad después de la asignación de innerTexto textContent.

myElement.innerText = myElement.textContent = "foo";

Editar (gracias a Mark Amery por el comentario a continuación): solo hágalo de esta manera si sabe más allá de una duda razonable que ningún código dependerá de verificar la existencia de estas propiedades, como (por ejemplo) jQuery . Pero si está utilizando jQuery, probablemente usaría la función "text" y haría $ ('# myElement'). Text ('foo') como muestran otras respuestas.

innerTextse ha agregado a Firefox y debería estar disponible en la versión FF45: https://bugzilla.mozilla.org/show_bug.cgi?id=264412

Se ha escrito un borrador de especificaciones y se espera que se incorpore al estándar de vida HTML en el futuro: http://rocallahan.github.io/innerText-spec/ , https://github.com/whatwg/html/issues/ 465

Tenga en cuenta que actualmente las implementaciones de Firefox, Chrome e IE son incompatibles. En el futuro, probablemente podamos esperar que Firefox, Chrome y Edge converjan mientras que el antiguo IE sigue siendo incompatible.

Ver también: https://github.com/whatwg/compat/issues/5

¿Qué tal algo como esto?

//$elem is the jQuery object passed along.

var $currentText = $elem.context.firstChild.data.toUpperCase();

** Necesitaba poner el mío en mayúscula.

Como en 2016 desde Firefox v45, innerTextfunciona en firefox, eche un vistazo a su soporte: http://caniuse.com/#search=innerText

Si desea que funcione en versiones anteriores de Firefox, puede usarlo textContent, que tiene mejor soporte en Firefox pero peor en versiones anteriores de IE : http://caniuse.com/#search=textContent

Esta ha sido mi experiencia con innerText, textContent, innerHTML, y el valor:

// elem.innerText = changeVal;  // works on ie but not on ff or ch
// elem.setAttribute("innerText", changeVal); // works on ie but not ff or ch
// elem.textContent = changeVal;  // works on ie but not ff or ch
// elem.setAttribute("textContent", changeVal);  // does not work on ie ff or ch
// elem.innerHTML = changeVal;  // ie causes error - doesn't work in ff or ch
// elem.setAttribute("innerHTML", changeVal); //ie causes error doesn't work in ff or ch
   elem.value = changeVal; // works in ie and ff -- see note 2 on ch
// elem.setAttribute("value", changeVal); // ie works; see note 1 on ff and note 2 on ch

es decir, Internet Explorer, ff = firefox, ch = google chrome. nota 1: ff funciona hasta que se elimine el valor con retroceso - vea la nota de Ray Vega arriba. nota 2: funciona un poco en Chrome: después de la actualización no cambia, luego hace clic y vuelve a hacer clic en el campo y aparece el valor. Lo mejor del lote es elem.value = changeVal; que no comenté arriba.

Solo volviendo a publicar los comentarios debajo de la publicación original. innerHTML funciona en todos los navegadores. Gracias stefita

myElement.innerHTML = "foo";

encontré esto aquí:

<!--[if lte IE 8]>
    <script type="text/javascript">
        if (Object.defineProperty && Object.getOwnPropertyDescriptor &&
            !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get)
          (function() {
            var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
            Object.defineProperty(Element.prototype, "textContent",
              { // It won't work if you just drop in innerText.get
                // and innerText.set or the whole descriptor.
                get : function() {
                  return innerText.get.call(this)
                },
                set : function(x) {
                  return innerText.set.call(this, x)
                }
              }
            );
          })();
    </script>
<![endif]-->

También es posible emular el innerTextcomportamiento en otros navegadores:

 if (((typeof window.HTMLElement) !== "undefined") && ((typeof HTMLElement.prototype.__defineGetter__) !== "undefined")) {
     HTMLElement.prototype.__defineGetter__("innerText", function () {
         if (this.textContent) {
             return this.textContent;
         } else {
             var r = this.ownerDocument.createRange();
             r.selectNodeContents(this);
             return r.toString();
         }
     });
     HTMLElement.prototype.__defineSetter__("innerText", function (str) {
         if (this.textContent) {
             this.textContent = str;
         } else {
             this.innerHTML = str.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/\n/g, "<br />\n");
         }
     });
 }