Comment puis-je modifier le texte d'un élément span en JavaScript

Question

Si j'ai une durée, dire:

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

Comment utiliser JavaScript pour changer « hereismytext » à « newText »?

Answer 1

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

EDIT Pour les navigateurs modernes:

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

Answer 2

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

Answer 3

L'utilisation innerHTML est SO NON RECOMMANDÉ. 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

Edité le 4 novembre 2017:

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

Answer 4

Si vous êtes celui fournissant le texte et aucune partie du texte est fourni par l'utilisateur (ou d'une autre source que vous ne contrôlez pas), puis la mise en innerHTML est très bien:

// * 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 font remarquer, si vous n'êtes pas la source d'une partie de la chaîne de texte, l'utilisation de innerHTML peut vous soumettre à des attaques par injection de contenu comme XSS si vous ne prenez pas soin de désinfecter correctement le texte.

Si vous utilisez l'entrée de l'utilisateur, voici une façon de le faire en toute sécurité tout en maintenant la compatibilité inter-navigateur:

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

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

Et si vous voulez éviter les remboursements (causée par innerText) si possible:

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

Answer 5

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é 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 si un navigateur prend en charge l'une de ces propriétés et, dans ce cas, affecte le "nouveau texte".

démonstration en direct: here

Answer 6

J'utilise Jquery et aucune de ces aidé, je ne sais pas pourquoi, mais cela a fonctionné:

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

Answer 7

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

Answer 8

Pour cette période

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

Vous pouvez aller comme ceci: -

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