Hoe verander ik de tekst van een span-element met JavaScript?

Als ik een spanheb, zeg dan:

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

Hoe gebruik ik JavaScript om “hereismytext” te veranderen in “newtext”?

Antwoord 1, autoriteit 100%

Voor moderne browsers moet u het volgende gebruiken:

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

Hoewel oudere browsers textContentmogelijk niet kennen, wordt het gebruik van innerHTMLniet aanbevolen, aangezien dit een XSS-kwetsbaarheid introduceert wanneer de nieuwe tekst gebruikersinvoer is (zie andere antwoorden hieronder voor een meer gedetailleerde discussie):

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

Antwoord 2, autoriteit 12%

Het gebruik van innerHTMLis ZO NIET AANBEVOLEN.
In plaats daarvan moet u een textNode maken. Op deze manier “bind” je je tekst en ben je, althans in dit geval, niet kwetsbaar voor een XSS-aanval.

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

Op de juiste manier:

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

Voor meer informatie over dit beveiligingslek:
Cross-site-scripting (XSS) – OWASP

Bewerkt op 4 november 2017:

Derde regel code aangepast volgens @mumushsuggestie: “use appendChild(); plaats”.

Trouwens, volgens @Jimbo Jonnydenk ik dat alles moet worden behandeld als gebruikersinvoer door het principe van Security by Layers toe te passen. Zo kom je niet voor verrassingen te staan.

Antwoord 3, autoriteit 4%

EDIT:Dit is geschreven in 2014. U geeft waarschijnlijk niet meer om IE8 en kunt het gebruik van innerTextvergeten. Gebruik gewoon textContenten klaar ermee, hoera.

Als jij degene bent die de tekst aanlevert en geen enkel deel van de tekst wordt geleverd door de gebruiker (of een andere bron waarover je geen controle hebt), dan kan het instellen van innerHTMLacceptabel zijn:

// * 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';

Echter, zoals anderen opmerken, als u niet de bron bent voor enig deel van de tekstreeks, kan het gebruik van innerHTMLu blootstellen aan aanvallen met inhoudsinjectie zoals XSS als u niet voorzichtig bent met het opruimen de tekst eerst.

Als u invoer van de gebruiker gebruikt, is hier een manier om dit veilig te doen en tegelijkertijd de compatibiliteit tussen verschillende browsers te behouden:

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

Firefox ondersteunt niet innerTexten IE8 ondersteunt niet textContent, dus u moet beide gebruiken als u Cross-Browser-compatibiliteit wilt onderhouden.

en als u wilt vermijden reflecks (veroorzaakt door innerText) waar mogelijk:

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

Antwoord 4, Autoriteit 4%

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

Antwoord 5, Autoriteit 3%

Ik gebruik Jqueryen geen van de bovenstaande geholpen, ik weet niet waarom, maar dit werkte:

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

Antwoord 6

Hier is een andere manier:

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

De Inntext-eigenschap wordt gedetecteerd door Safari, Google Chrome en MSIE. Voor Firefox was de standaard manier om dingen te doen was om TextContent te gebruiken, maar sinds versie 45 heeft het ook een Innertext-eigenschap, omdat iemand me onlangs heeft aangewezen. Deze oplossingstests om te zien of een browser een van deze eigenschappen ondersteunt en zo ja, wijst de “newtext” toe.

live demo: hier

Antwoord 7

Naast de Pure JavaScript-antwoorden hierboven, kunt u JQuery Tekst -methode gebruiken als volgt:

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

Als u het antwoord moet uitbreiden om html-inhoud van een span- of div-element te krijgen/wijzigen, kunt u dit doen:

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

Referenties:

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

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

Antwoord 8

U kunt ook de methode querySelector() gebruiken, ervan uitgaande dat de ‘myspan’-id uniek is, aangezien de methode het eerste element met de opgegeven selector retourneert:

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

developer.mozilla

Antwoord 9

Net als in andere antwoorden worden innerHTMLen innerTextniet aanbevolen, het is beter om textContentte gebruiken. Dit attribuut wordt goed ondersteund, je kunt het als volgt controleren:
http://caniuse.com/#search=textContent

Antwoord 10

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

dit selecteert dom-node met id myspanen verandert de tekstinhoud in new text

Antwoord 11

U kunt

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

Antwoord 12

(function ($) {
    $(document).ready(function(){
    $("#myspan").text("This is span");
  });
}(jQuery));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="myspan"> hereismytext </span>

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

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