web-dev-qa-db-fra.com

Comment changer le texte d'un élément span en JavaScript

Si j'ai une portée, dites:

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

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

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

Pour les navigateurs modernes:

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

Utilisation de innerHTML is SO NON RECOMMANDÉ . Vous devez plutôt créer un textNode. De cette façon, vous "liez" votre texte et vous n'êtes pas, du moins dans ce cas, vulnérable aux attaques XSS.

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

Le droit chemin:

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:

Troisième ligne de code modifiée selon @mumush suggestion: "utilisez appendChild (); à la place" .
Btw, selon @Jimbo Jonny Je pense que tout devrait être traité comme une entrée d’utilisateur en appliquant le principe Sécurité par couches. De cette façon, vous ne rencontrerez aucune surprise.

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

EDIT: Ceci a été écrit en 2014. Vous ne vous souciez probablement plus d'IE8 et pouvez oublier d'utiliser innerText. Il suffit d’utiliser textContent et d’en finir, hourra.

Si vous êtes celui qui fournit le texte et qu'aucune partie du texte n'est fournie par l'utilisateur (ou une autre source que vous ne contrôlez pas), définir innerHTML peut ê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 personnes le remarquent, si vous n’êtes pas le source de toute partie de la chaîne de texte, utiliser innerHTML peut vous exposer à des attaques par injection de contenu telles que XSS si vous ne prenez pas soin de nettoyer correctement le texte.

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

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

Firefox ne supporte pas innerText et IE8 ne supporte pas textContent. Vous devez donc utiliser les deux si vous souhaitez maintenir la compatibilité entre navigateurs.

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

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

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

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

Voici un autre moyen:

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

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

La propriété innerText sera détectée par Safari, Google Chrome et MSIE. Pour Firefox, la méthode standard consistait à utiliser textContent, mais depuis la version 45, celle-ci possède également une propriété innerText, comme quelqu'un m'a gentiment informé récemment. Cette solution teste si un navigateur prend en charge l’une ou l’autre de ces propriétés et, le cas échéant, affecte le "newtext". 

Démo en direct: ici

7
slevy1

En plus des réponses javascript pures ci-dessus, vous pouvez utiliser la méthode jQuery text comme suit:

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

Si vous avez besoin d'étendre la réponse pour obtenir/modifier le contenu de html d'un span ou d'un div, procédez comme suit:

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

Références:

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

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

1
Mohamed Nagieb

Vous pouvez également utiliser la méthode querySelector (), en supposant que l'identifiant 'myspan' est unique car la méthode retourne le premier élément avec le sélecteur spécifié:

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

developer.mozilla

0
Addis

Comme dans une autre réponse, innerHTML et innerText_ ne sont pas recommandés, il vaut mieux utiliser textContent. Cet attribut est bien supporté, vous pouvez vérifier ceci: http://caniuse.com/#search=textContent

0
Hazlo8

Tu peux faire

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

ceci sélectionnera dom-node avec id myspan et changera le contenu textuel en new text

0
overflow company