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

Si j'ai une envergure, dites:

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

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

Pour les navigateurs modernes, vous devez utiliser:

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

Bien que les navigateurs plus anciens ne le sachent pas textContent, il n'est pas recommandé de l'utiliser innerHTMLcar il introduit une vulnérabilité XSS lorsque le nouveau texte est entré 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";

L'utilisation de innerHTML n'est donc PAS RECOMMANDÉE . Au lieu de cela, vous devez créer un textNode. De cette façon, vous "liez" votre texte et vous n'êtes pas, au moins dans ce cas, vulnérable à une attaque 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

Modifié le 4 novembre 2017:

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

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

EDIT: Cela a été écrit en 2014. Vous ne vous souciez probablement plus de IE8 et pouvez oublier d'utiliser innerText. Il suffit de l'utiliser textContentet 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), le réglage innerHTMLpeut ê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';

Cependant, comme d'autres le notent, si vous n'êtes pas la source d'une partie de la chaîne de texte, l'utilisation innerHTMLpeut vous soumettre à des attaques par injection de contenu comme XSS si vous ne faites pas attention de bien nettoyer le texte en premier.

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

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

Firefox ne prend pas en charge innerTextet IE8 ne prend pas en charge textContent, vous devez donc utiliser les deux si vous souhaitez conserver la compatibilité entre les 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';
}

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

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

Voici une autre façon:

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 façon standard de faire les choses était d'utiliser textContent, mais depuis la version 45, il a aussi une propriété innerText, comme quelqu'un m'a gentiment informé récemment. Cette solution teste pour voir si un navigateur prend en charge l'une de ces propriétés et, dans l'affirmative, attribue le "nouveau texte".

Démo en direct: ici

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

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

Si vous devez étendre la réponse pour obtenir / modifier le contenu html des éléments span ou div, vous pouvez le faire:

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

Références:

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

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

Vous pouvez également utiliser la méthode querySelector (), en supposant que l'id '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

Comme dans d' autres réponses, innerHTML et innerText ne sont pas recommandés, il vaut mieux utiliser textContent . Cet attribut est bien pris en charge, vous pouvez le vérifier ceci: http://caniuse.com/#search=textContent

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

cela sélectionnera dom-node avec id myspanet le changera le contenu du texte ennew text

Tu peux faire

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

Pour cette durée

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

Vous pouvez aller comme ça: -

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