Kreuz Browser für Werte innertext

wir Einstellung sagen, dass ich den folgenden Code haben:Kreuz Browser für Werte innertext

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

Und ich möchte Textwert für das div-Tag mit id = ‚d‘ ändern. Leider funktioniert der obige Blockcode nicht und der Textinhalt ändert sich nicht.

Es funktioniert, wenn Sie das folgende Rezept:

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

Aber ich mag nicht das Rezept oben, weil es nicht kompakt ist.

Haben Sie irgendwelche Vorschläge, warum der erste Ansatz nicht funktioniert?

Quelle

2012-07-25 Erik

Warum setzen Sie die zweite Lösung nicht in eine Funktion mit einem Parameter für das Element und einem für die Zeichenfolge. Dann müssten Sie 'setText (mydiv," new text ") machen;' –

es ist nicht "document.getElementByid" sollte "document.getElementById" sein. "I" von "id" sollte in Großbuchstaben geschrieben sein. –

'd [('innerText' in d)? 'innerText': 'textContent'] = 'Neuer Text'; ' –

Statt mehrere Zuweisungen, können Sie die Eigenschaft greifen und verwenden, die

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

Quelle

2012-07-25 09:25:10

Großartig! Das ist es, was ich brauche. Ich danke dir sehr. – Erik

Dies ist eine brillante Art, damit umzugehen, froh, dass ich darüber gestolpert bin. –

Der erste Ansatz funktioniert nicht, da er nur die Variable auf den neuen Wert setzt, er schreibt den Wert nicht in das Element. Die Linie

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

... setzt die Variable innerText auf den Wert der Eigenschaft text es findet, es ist kein Hinweis auf die tatsächliche Eigenschaft selbst.

Sie werden den Zweig zu tun haben, zum Beispiel:

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

Das Feature-detektiert, ob der Browser verwendet innerText oder textContent, indem Sie auf das Element für die Existenz der Immobilie suchen (das ist, was die in Betreiber überprüft, ob ein Objekt eine Eigenschaft mit dem angegebenen Namen hat, selbst wenn diese Eigenschaft leer ist, null, undefined, usw.).

können Sie sogar selbst schreiben eine Funktion für sie:

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

Das macht die Feature-Erkennung einmal und gibt eine Funktion jeden halbwegs anständigen Motor für Dich Inline wird.

Oder alternativ, wenn HTML-Markup in der Nachricht als Markup (anstatt als literaler Text) behandelt werden soll, können Sie einfach innerHTML verwenden (was in allen Browsern konsistent ist). Aber wieder, wenn Sie innerHTML verwenden, wird Markup verarbeitet, was möglicherweise nicht das ist, was Sie wollen.

Ich finde es sinnvoll, eine gute JavaScript-Bibliothek zu verwenden, um mit diesem Browser Unterschieden zu behandeln (und eine Tonne nützlicher weiterer Funktionalität zur Verfügung zu stellen), wie jQuery, YUI, Closure oder any of several others. Offensichtlich gibt es nichts, was man mit einer Bibliothek tun kann, auf die man nicht verzichten kann, es geht nur darum, auf den Schultern von Leuten zu stehen, die schon eine Menge Arbeit geleistet haben. :-)

In diesem Fall zum Beispiel mit jQuery die oben wäre:

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

Das ist es.

Quelle

2012-07-25 09:16:09

Danke für die Antwort, aber ich brauche innerText. Ok, ich werde den Zweig verwenden – Erik

Hat YUI eine Methode innerText? – Erik

@Erik: Froh, dass geholfen hat. Ich erklärte, wie es funktioniert (der Feature-Test) ein bisschen mehr. –

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

Quelle

2014-08-08 10:35:56 gumkins

Sie textContent nur & verwenden können, wird es in gängigen Browsern funktionieren ... (FF, Safari & Chrome)

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

Quelle

2015-04-12 19:54:01 horacio

Antwort

Verwandte Themen