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

Question

Wenn ich eine span , sagen:

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

Wie kann ich JavaScript verwenden, um "hereismytext" in "newtext" zu ändern?

Answer 1

Bei modernen Browsern sollten Sie verwenden:

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

Ältere Browser kennen zwar möglicherweise nicht textContent wird nicht empfohlen innerHTML da es zu einer XSS-Schwachstelle führt, wenn der neue Text eine Benutzereingabe ist (siehe andere Antworten unten für eine ausführlichere Diskussion):

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

Answer 2

使用方法 innerHTML es DAHER NICHT EMPFOHLEN . 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 Sicherheitslücke finden Sie hier: Cross-Site-Scripting (XSS) - OWASP

Bearbeitet am 4. November 2017:

Geänderte dritte Zeile des Codes gemäß @mumush Anregung: "stattdessen appendChild(); verwenden".
Übrigens, laut @Jimbo Jonny Meiner Meinung nach sollte alles als Benutzereingabe behandelt werden, indem das Prinzip der Sicherheit nach Schichten angewendet wird. Auf diese Weise werden Sie keine Überraschungen erleben.

Answer 3

EDITAR: Dies wurde 2014 geschrieben. Es hat sich eine Menge geändert. Der IE8 ist Ihnen wahrscheinlich nicht mehr wichtig. Und Firefox unterstützt jetzt innerText .

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 ist die 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';

Wenn Sie jedoch, wie bereits erwähnt, nicht die Quelle für einen Teil der Textzeichenfolge sind, können Sie mit innerHTML kann zu Content-Injection-Angriffen wie XSS führen, wenn Sie nicht darauf achten, den Text vorher zu bereinigen.

Wenn Sie Benutzereingaben verwenden, gibt es eine Möglichkeit, dies sicher zu tun und gleichzeitig die Kompatibilität mit anderen Browsern zu gewährleisten:

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

Firefox unterstützt nicht innerText und der IE8 unterstützt nicht textContent Sie müssen also beide verwenden, wenn Sie die Kompatibilität zwischen den Browsern aufrechterhalten wollen.

Und wenn Sie Rückflüsse vermeiden wollen (verursacht durch innerText ), wo dies möglich ist:

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

Answer 4

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

Answer 5

Ich benutze Jquery und keine der oben genannten Maßnahmen half, ich weiß nicht warum, aber das hier hat funktioniert:

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