wake-up-neo.com

Wie ändere ich den Text eines Spannelements in JavaScript?

Wenn ich eine Zeitspanne habe, sagen Sie:

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

Wie verwende ich JavaScript, um "Hereismytext" in "Newtext" zu ändern?

304
user105033
document.getElementById("myspan").innerHTML="newtext";

Für moderne Browser:

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

Verwenden Sie innerHTML ist SO NOT EMPFEHLT . Stattdessen sollten Sie einen textNode erstellen. Auf diese Weise "binden" Sie Ihren Text und sind 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 Sicherheitsanfälligkeit: Cross Site Scripting (XSS) - OWASP

Bearbeitet am 4. November 2017:

Geänderte dritte Codezeile gemäß @mumush suggestion: "benutze appendChild (); stattdessen" .
Übrigens, nach @Jimbo Jonny Ich denke, alles sollte als Benutzereingabe behandelt werden, indem das Prinzip "Sicherheit nach Schichten" angewendet wird. So werden Sie keine Überraschungen erleben.

63
nicooo.
document.getElementById('myspan').innerHTML = 'newtext';
29
Dan

EDIT: Dies wurde 2014 geschrieben. Sie interessieren sich wahrscheinlich nicht mehr für IE8 und können die Verwendung von innerText vergessen. Verwenden Sie einfach textContent und fertig damit, hooray.

Wenn Sie derjenige sind, der den Text liefert und kein Teil des Textes vom Benutzer (oder einer anderen Quelle, die Sie nicht kontrollieren können) bereitgestellt wird, ist die Einstellung von innerHTML möglicherweise akzeptabel:

// * 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 nicht die Quelle für einen Teil der Textzeichenfolge sind, kann die Verwendung von innerHTML Sie Angriffen durch Inhalte wie XSS ausgesetzt machen, wenn Sie den Text nicht zuerst ordnungsgemäß bereinigen.

Wenn Sie Eingaben des Benutzers verwenden, können Sie dies auf sichere Weise tun und gleichzeitig die Browser-kompatible Kompatibilität beibehalten:

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

Firefox unterstützt innerText nicht, und IE8 unterstützt textContent nicht. Sie müssen also beides verwenden, wenn Sie die Browser-kompatible Kompatibilität beibehalten möchten.

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

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

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

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

Hier ist ein anderer Weg:

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

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

Die Eigenschaft innerText wird von Safari, Google Chrome und MSIE erkannt. Für Firefox war die Verwendung von textContent die Standardmethode, aber seit Version 45 verfügt auch sie über eine innerText-Eigenschaft, wie mich kürzlich jemand freundlich begrüßt hat. Diese Lösung testet, ob ein Browser eine dieser Eigenschaften unterstützt, und weist gegebenenfalls den "neuen Text" zu. 

Live Demo: hier

7
slevy1

Zusätzlich zu den reinen Javascript-Antworten oben können Sie die Methode jQuery text wie folgt verwenden:

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

Wenn Sie die Antwort erweitern müssen, um html -Inhalte eines Bereichs oder div-Elements zu erhalten/ändern, können Sie Folgendes tun:

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

Verweise:

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

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

1
Mohamed Nagieb

Sie können auch die querySelector () -Methode verwenden, vorausgesetzt, die 'myspan'-ID ist eindeutig, da die Methode das erste Element mit dem angegebenen Selektor zurückgibt:

document.querySelector('#myspan').textContent = 'newtext';

developer.mozilla

0
Addis

Wie in anderen Antworten werden innerHTML und innerText nicht empfohlen. Verwenden Sie textContent. Dieses Attribut wird gut unterstützt. Sie können dies überprüfen: http://caniuse.com/#search=textContent

0
Hazlo8

Du kannst tun

 document.querySelector ("[Span]"). textContent = "content_to_display"; 
0
trustidkid
document.getElementById("myspan").textContent="newtext";

dadurch wird der Dom-Knoten mit der ID myspan ausgewählt und der Textinhalt in new text geändert.

0