Cross-Browser innerText per l'impostazione dei valori

Diciamo che ho il seguente codice:Cross-Browser innerText per l'impostazione dei valori

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

E voglio cambiare il valore di testo per il tag div con id = 'd'. Sfortunatamente il codice di blocco sopra non funziona e il contenuto del testo non cambia.

Funziona se fare la seguente ricetta:

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

Ma non mi piace la ricetta di cui sopra perché non è compatto.

Hai qualche suggerimento perché il primo approccio non funziona?

fonte

2012-07-25 Erik

Perché non si mette la seconda soluzione in una funzione con un parametro per l'elemento e uno per la stringa. Quindi dovresti semplicemente eseguire 'setText (mydiv," nuovo testo ");' –

non è 'document.getElementByid' dovrebbe essere' document.getElementById' 'I' di' id' dovrebbe essere in maiuscolo. –

'd [('innerText' in d)? 'innerText': 'textContent'] = 'Nuovo testo'; ' –

Invece di assegnazioni multiple, si può afferrare la proprietà e l'uso che

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

fonte

2012-07-25 09:25:10

Grande! È quello di cui ho bisogno. Grazie mille. – Erik

Questo è un modo geniale di gestirlo, felice di esserci imbattuto in esso. –

Il primo approccio non funziona perché non fa altro che impostare la variabile per il nuovo valore, esso non scrive il valore all'elemento. La linea

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

... imposta la variabile innerText al valoredella proprietà testo che trova, ma non è un riferimento alla proprietà vero e proprio.

Dovrete fare il ramo, ad esempio:

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

Tale caratteristica-rileva se il browser utilizza innerText o textContent, cercando per l'esistenza della proprietà sull'elemento (che è quello che l'operatore in fa, controlla se un oggetto ha una proprietà con il nome dato, anche se quella proprietà è vuota, null, undefined, ecc.).

Si può anche scrivere da soli una funzione per esso:

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

che fa la funzione di rilevamento una volta, e restituisce una funzione qualsiasi motore di mezza decente in linea per voi.

In alternativa, se si desidera che il markup HTML nel messaggio venga gestito come markup (anziché come testo letterale), è sufficiente utilizzare innerHTML (che è coerente tra i browser). Ma ancora una volta, se si utilizza innerHTML, verrà elaborato il markup che potrebbe non essere quello che si desidera.

ritengo utile per utilizzare una buona libreria JavaScript per affrontare queste differenze tra i browser (e per fornire un tonnellata di utili ulteriori funzionalità), come ad esempio jQuery, YUI, Closure o any of several others. Ovviamente non c'è niente che puoi fare con una libreria che non puoi fare a meno di una, è solo questione di stare sulle spalle di persone che hanno già fatto un enorme lavoro. :-)

In questo caso, per esempio, utilizzando jQuery quanto sopra sarebbe:

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

Questo è tutto.

fonte

2012-07-25 09:16:09

Grazie per la risposta, ma ho bisogno di innerText. Ok userò il ramo – Erik

YUI ha un metodo innerText? – Erik

@Erik: Sono contento di averlo aiutato. Ho spiegato come funziona (il feature test) un po 'di più. –

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

fonte

2014-08-08 10:35:56 gumkins

si può usare solo textContent & che funzionerà in principali browser ... (FF, Safari & Chrome)

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

fonte

2015-04-12 19:54:01 horacio

Cross-Browser innerText per l'impostazione dei valori

risposta

Problemi correlati