Wie ändere ich den Text eines span-Elements mit JavaScript?

Wenn ich eine habe Spannesagen:

<span id="myspan"> hereismytext </span>

Wie verwende ich JavaScript, um “hereismytext” in “newtext” zu ändern?

Für moderne Browser sollten Sie verwenden:

document.getElementById("myspan").textContent="newtext";

Während ältere Browser es möglicherweise nicht wissen textContentes wird nicht empfohlen zu verwenden innerHTML da es eine XSS-Schwachstelle einführt, wenn der neue Text eine Benutzereingabe ist (siehe andere Antworten unten für eine detailliertere Diskussion):

//POSSIBLY INSECURE IF NEWTEXT BECOMES A VARIABLE!!
document.getElementById("myspan").innerHTML="newtext";

Verwenden innerHTML ist ALSO NICHT EMPFEHLENSWERT. Stattdessen sollten Sie einen textNode erstellen. Auf diese Weise “binden” Sie Ihren Text und sind zumindest in diesem Fall nicht anfällig für einen XSS-Angriff.

document.getElementById("myspan").innerHTML = "sometext"; //INSECURE!!

Der richtige Weg:

span = document.getElementById("myspan");
txt = document.createTextNode("your cool text");
span.appendChild(txt);

Weitere Informationen zu dieser Schwachstelle:
Cross-Site-Scripting (XSS) – OWASP

Bearbeitet am 04.11.2017:

Geänderte dritte Codezeile gemäß @mumush-Vorschlag: „benutze stattdessen appendChild();“.

Übrigens, laut @Jimbo Jonny sollte alles als Benutzereingabe behandelt werden, indem das Prinzip der Sicherheit durch Schichten angewendet wird. So erleben Sie keine Überraschungen.

BEARBEITEN: Dies wurde 2014 geschrieben. Sie interessieren sich wahrscheinlich nicht mehr für IE8 und können die Verwendung vergessen innerText. Benutz einfach textContent und fertig, hurra.

Wenn Sie derjenige sind, der den Text liefert und kein Teil des Textes vom Benutzer (oder einer anderen Quelle, die Sie nicht kontrollieren) geliefert wird, dann Einstellung innerHTML könnte akzeptabel sein:

// * Fine for hardcoded text strings like this one or strings you otherwise 
//   control.
// * Not OK for user-supplied input or strings you don't control unless
//   you know what you are doing and have sanitized the string first.
document.getElementById('myspan').innerHTML = 'newtext';

Wie andere jedoch anmerken, verwenden Sie, wenn Sie nicht die Quelle für einen Teil der Textzeichenfolge sind innerHTML kann Sie Inhaltsinjektionsangriffen wie XSS aussetzen, wenn Sie nicht darauf achten, den Text zuerst ordnungsgemäß zu bereinigen.

Wenn Sie Eingaben des Benutzers verwenden, ist dies eine Möglichkeit, dies sicher zu tun und gleichzeitig die Cross-Browser-Kompatibilität zu gewährleisten:

var span = document.getElementById('myspan');
span.innerText = span.textContent="newtext";

Firefox unterstützt nicht innerText und IE8 nicht unterstützt textContent Sie müssen also beide verwenden, wenn Sie die browserübergreifende Kompatibilität aufrechterhalten möchten.

Und wenn Sie Rückflüsse (verursacht durch innerText) wo möglich:

var span = document.getElementById('myspan');
if ('textContent' in span) {
    span.textContent="newtext";
} else {
    span.innerText="newtext";
}

document.getElementById('myspan').innerHTML = 'newtext';

ich benutze Jquery und nichts der oben genannten hat geholfen, ich weiß nicht warum, aber das hat funktioniert:

 $("#span_id").text("new_value");

Hier ist ein anderer Weg:

var myspan = document.getElementById('myspan');

if (myspan.innerText) {
    myspan.innerText = "newtext";
}
else
if (myspan.textContent) {
        myspan.textContent = "newtext";   
}

Die innerText-Eigenschaft wird von Safari, Google Chrome und MSIE erkannt. Für Firefox bestand die Standardmethode darin, textContent zu verwenden, aber seit Version 45 hat es auch eine innerText-Eigenschaft, wie mir kürzlich jemand freundlicherweise mitgeteilt hat. Diese Lösung testet, ob ein Browser eine dieser Eigenschaften unterstützt, und weist in diesem Fall den “newtext” zu.

Live-Demo: Hier

Zusätzlich zu den obigen reinen Javascript-Antworten können Sie jQuery verwenden Text Methode wie folgt:

$('#myspan').text('newtext');

Wenn Sie die Antwort erweitern müssen, um sie zu erhalten / zu ändern html Inhalt eines Span- oder Div-Elements, können Sie Folgendes tun:

$('#mydiv').html('<strong>new text</strong>');

Verweise:

.Text(): http://api.jquery.com/text/

.html(): http://api.jquery.com/html/