Comment modifier le texte d'un élément span à l'aide de JavaScript ?

Question

Si j'ai un la travée dire :

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

Comment utiliser JavaScript pour remplacer "hereismytext" par "newtext" ?

Answer 1

Pour les navigateurs modernes, vous devez utiliser :

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

Bien que les navigateurs plus anciens puissent ne pas connaître textContent il n'est pas recommandé d'utiliser innerHTML car il introduit une vulnérabilité XSS lorsque le nouveau texte est saisi par l'utilisateur (voir les autres réponses ci-dessous pour une discussion plus détaillée) :

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

Answer 2

Utilisation innerHTML est DONC DÉCONSEILLÉ . Au lieu de cela, vous devez créer un textNode. De cette manière, vous "liez" votre texte et vous n'êtes pas, du moins dans ce cas, vulnérable à une attaque XSS.

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

La bonne méthode :

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

Pour plus d'informations sur cette vulnérabilité : Cross Site Scripting (XSS) - OWASP

Édité le 4 novembre 2017 :

Modification de la troisième ligne de code en fonction de @mumush suggestion : "utiliser appendChild() ; à la place".
Par ailleurs, selon @Jimbo Jonny Je pense que tout devrait être traité comme un apport de l'utilisateur en appliquant le principe de la sécurité par couches. De cette manière, vous n'aurez pas de surprises.

Answer 3

EDIT : Ce texte a été écrit en 2014. Beaucoup de choses ont changé. Vous ne vous souciez probablement plus d'IE8. Et Firefox prend désormais en charge innerText .

Si c'est vous qui fournissez le texte et qu'aucune partie du texte n'est fournie par l'utilisateur (ou par une autre source que vous ne contrôlez pas), alors le paramètre innerHTML pourrait être acceptable :

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

Toutefois, comme d'autres l'ont fait remarquer, si vous n'êtes pas la source d'une partie quelconque de la chaîne de texte, l'utilisation de la fonction innerHTML peut vous exposer à des attaques par injection de contenu telles que XSS si vous ne prenez pas soin d'assainir correctement le texte au préalable.

Si vous utilisez les données de l'utilisateur, voici une façon de le faire en toute sécurité tout en maintenant la compatibilité entre les navigateurs :

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

Firefox ne prend pas en charge innerText et IE8 ne prend pas en charge textContent vous devez donc utiliser les deux si vous voulez maintenir la compatibilité entre les navigateurs.

Et si vous voulez éviter les reflux (causés par les innerText ) dans la mesure du possible :

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

J'utilise Jquery et rien de ce qui précède n'a aidé, je ne sais pas pourquoi, mais ceci a fonctionné :

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