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

Hier ist eine andere Möglichkeit:

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 Standardmethode die Verwendung von textContent, aber seit Version 45 hat auch Firefox eine innerText-Eigenschaft, wie mir kürzlich jemand freundlicherweise mitteilte. Diese Lösung prüft, ob ein Browser eine dieser beiden Eigenschaften unterstützt, und wenn ja, weist er den "neuen Text" zu.

Live-Demo: aquí

Answer 2

Zusätzlich zu den reinen javascript Antworten oben, können Sie jQuery verwenden Text Methode wie folgt:

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

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

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

Referenzen:

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

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

Answer 3

Diese Frage stellen sich (im Jahr 2022) immer noch viele Menschen, und die verfügbaren Antworten sind nicht wirklich auf dem neuesten Stand.

Utilice innerText ist die beste Methode

Wie Sie in der Abbildung sehen können MDM-Dokumente innerText ist der beste Weg, um den Text einer Datei abzurufen und zu ändern. <span> HTML-Element über Javascript.

El innerText Eigenschaft wird SEHR gut unterstützt ( 97.53% aller Internetnutzer laut Caniuse )

使用方法

Einfach abrufen und neuen Text mit der Eigenschaft wie folgt einstellen:

let mySpan = document.getElementById("myspan");

console.log(mySpan.innerText);

mySpan.innerText = "Setting a new text content into the span element.";

Warum besser als innerHTML ?

Verwenden Sie nicht innerHTML um den Inhalt mit Benutzereingaben zu aktualisieren, kann dies zu einer großen Verwundbarkeit führen, da der von Ihnen festgelegte String-Inhalt interpretiert und in HTML-Tags umgewandelt wird.

Dies bedeutet, dass Benutzer Skripte in Ihre Website einfügen können, was als XSS-Angriffe/Schwachstellen (Cross-Site Scripting) bekannt ist.

Warum besser als textContent ?

Erster Punkt textContent wird vom IE8 nicht unterstützt (aber ich denke, im Jahr 2022 interessiert das niemanden mehr). Aber das Hauptelement ist der wahre Unterschied des Ergebnisses, das Sie erhalten können, wenn Sie textContent anstelle von innerText .

El Beispiel aus der MDM-Dokumentation es perfekt um das zu veranschaulichen, haben wir die folgende Situation:

<p id="source">
  <style>#source { color: red;  } #text { text-transform: uppercase; }</style>
<span id=text>Take a look at<br>how this text<br>is interpreted
       below.</span>
  <span style="display:none">HIDDEN TEXT</span>
</p>

Wenn Sie innerText zum Abrufen des Textinhalts von <p id="source"> erhalten wir:

TAKE A LOOK AT
HOW THIS TEXT
IS INTERPRETED BELOW.

Das ist genau das, was wir wollten.

Jetzt mit textContent erhalten wir:

  #source { color: red;  } #text { text-transform: uppercase; }
Take a look athow this textis interpreted
       below.
  HIDDEN TEXT

Nicht gerade das, was Sie erwartet haben...

Aus diesem Grund ist die Verwendung von textContent ist nicht der richtige Weg.

Letzter Punkt

Wenn Sie nur Text an eine Datei anhängen wollen <p> ou <span> HTML-Element, die Antwort von nicooo. richtig ist, können Sie einen neuen Textknoten erstellen und ihn wie folgt an das vorhandene Element anhängen:

let mySpan = document.getElementById("myspan");

const newTextNode = document.createTextNode("Youhou!"),

mySpan.appendChild(newTextNode);

Answer 4

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

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

entwickler.mozilla

Answer 5

Wie in der anderen Antwort, innerHTML y innerText werden nicht empfohlen, besser ist es, die textInhalt . Dieses Attribut wird gut unterstützt, Sie können es hier überprüfen: http://caniuse.com/#search=textContent