Cross-browser innerText para establecer valores

Digamos que tengo el siguiente código:Cross-browser innerText para establecer valores

<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>

Y quiero cambiar el valor de texto para la etiqueta div con id = 'd'. Lamentablemente, el código de bloqueo anterior no funciona y el contenido del texto no cambia.

Funciona si hacer la siguiente receta:

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

Pero no me gusta la receta anterior, porque no es compacto.

¿Tiene alguna sugerencia de por qué el primer enfoque no funciona?

Fuente

2012-07-25 Erik

¿Por qué no pones la segunda solución en una función con un parámetro para el elemento y otro para la cadena? Entonces solo tendrías que hacer 'setText (mydiv," new text ");' –

no es 'document.getElementByid' debería ser' document.getElementById' 'I' de' id' debería estar en mayúscula. –

'd [('innerText' in d)? 'innerText': 'textContent'] = 'Nuevo texto'; ' –

En lugar de múltiples tareas, se puede agarrar la propiedad y el uso que

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

Fuente

2012-07-25 09:25:10

¡Genial! Es lo que necesito. Muchas gracias. – Erik

Esta es una manera brillante de manejarlo, me alegro de haberme encontrado con eso. –

El primer enfoque no funciona porque todo lo que hace es establecer la variable en el nuevo valor, no escribe el valor en el elemento. La línea

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

... establece la variable innerText al valor de la propiedad de texto que encuentra, no es una referencia a la misma propiedad real.

Vas a tener que hacer la rama, por ejemplo:

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

Esa característica-detecta si el navegador utiliza innerText o textContent mediante la búsqueda de la existencia de la propiedad en el elemento (eso es lo que el operador in sí, compruebe si un objeto tiene una propiedad con el nombre dado, incluso si esa propiedad está en blanco, null, undefined, etc.).

Puede incluso escribir usted mismo una función para ello:

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; 
})();

que hace la función de detección de una vez, y devuelve una función de cualquier motor de medio decente en línea para usted.

O alternativamente, si desea que el marcado HTML en el mensaje se maneje como marcado (en lugar de texto literal), puede simplemente usar innerHTML (que es coherente en todos los navegadores). Pero nuevamente, si usa innerHTML, se procesará el marcado que puede no ser el que desea.

me resulta útil el uso de una buena biblioteca JavaScript para hacer frente a estas diferencias navegador (y para proporcionar una tonelada de funcionalidad más útil), como jQuery, YUI, Closure o any of several others. Obviamente, no hay nada que puedas hacer con una biblioteca que no puedes prescindir de una, es solo cuestión de estar sobre los hombros de personas que ya han hecho una gran cantidad de trabajo. :-)

En este caso, por ejemplo, usando jQuery lo anterior sería:

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

Eso es todo.

Fuente

2012-07-25 09:16:09

Gracias por la respuesta, pero necesito innerText. Ok, usaré la rama – Erik

¿YUI tiene un método innerText? – Erik

@Erik: Me alegro de que haya ayudado. Expliqué cómo funciona (la prueba de características) un poco más. –

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

Fuente

2014-08-08 10:35:56 gumkins

puede utilizar solamente textContent & que funcionará en los navegadores más importantes ... (FF, Safari & Chrome)

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

Fuente

2015-04-12 19:54:01 horacio

Cross-browser innerText para establecer valores

Respuesta

Cuestiones relacionadas