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

Wenn ich eine Zeitspanne habe, sagen Sie:

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

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

Für moderne Browser sollten Sie Folgendes verwenden:

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

Ältere Browser wissen textContentdies möglicherweise nicht , es wird jedoch nicht empfohlen, es zu verwenden, innerHTMLda es eine XSS-Sicherheitsanfälligkeit einführt, wenn der neue Text vom Benutzer eingegeben wird (siehe andere Antworten unten für eine detailliertere Diskussion):

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

Die Verwendung von innerHTML wird 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 Sicherheitsanfälligkeit: Cross Site Scripting (XSS) - OWASP

Bearbeitet am 4. November 2017:

Die dritte Codezeile wurde gemäß dem Vorschlag von @mumush geändert : "Verwenden Sie stattdessen appendChild ();".
Übrigens, laut @Jimbo Jonny sollte alles als Benutzereingabe behandelt werden, indem das Prinzip "Sicherheit nach Ebenen" angewendet wird . Auf diese Weise werden Sie keine Überraschungen erleben.

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

EDIT: Dies wurde im Jahr 2014 geschrieben. Sie interessieren sich wahrscheinlich nicht mehr für IE8 und können die Verwendung vergessen innerText. Einfach benutzen textContentund 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, ist die Einstellung innerHTMLmö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, innerHTMLkann die Verwendung von, wie andere bemerken, zu Angriffen durch Inhaltsinjektion wie XSS führen, wenn Sie nicht zuerst darauf achten, den Text ordnungsgemäß zu bereinigen.

Wenn Sie Eingaben des Benutzers verwenden, haben Sie folgende Möglichkeiten, dies sicher zu tun und gleichzeitig die browserübergreifende Kompatibilität aufrechtzuerhalten:

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

Firefox unterstützt nicht innerTextund IE8 unterstützt nicht, textContentdaher müssen Sie beide verwenden, wenn Sie die browserübergreifende Kompatibilität beibehalten möchten.

Und wenn Sie Rückflüsse (verursacht durch innerText) nach Möglichkeit vermeiden möchten :

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

Ich benutze Jqueryund keiner 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 war die Standardmethode die Verwendung von textContent, aber seit Version 45 hat es auch eine innerText-Eigenschaft, wie mich kürzlich jemand freundlicherweise bestätigt hat. Diese Lösung testet, ob ein Browser eine dieser Eigenschaften unterstützt, und weist in diesem Fall den "neuen Text" zu.

Live-Demo: hier

Neben dem reinen Javascript Antworten oben, Sie jQuery verwenden können Text Methode , wie folgend:

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

Wenn Sie die Antwort erweitern müssen, um den HTML- Inhalt eines span- oder div-Elements abzurufen / zu ä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/

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

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

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

Dadurch wird der Dom-Knoten mit der ID ausgewählt myspanund der Textinhalt in geändertnew text

Du kannst tun

 document.querySelector ("[Span]"). textContent = "content_to_display"; 

Für diese Zeitspanne

<span id="name">sdfsdf</span>

Sie können so gehen: -

$("name").firstChild.nodeValue = "Hello" + "World";