Comment modifier le texte d'un élément de portée dans JavaScript

utilisant innerHTML est donc non recommandé . À la place, vous devez créer un textNode. De cette façon, 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!!

Le droit chemin:

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

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

Édité nov 4th 2017:

troisième ligne de code modifiée selon @mumush suggestion:"utiliser appendChild(); à la place".

Btw, selon @Jimbo Jonny je pense que tout devrait être traité comme une entrée utilisateur en appliquant le principe de sécurité par couches. De cette façon, vous ne rencontrerez pas de surprises.

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

EDIT: Ceci a été écrit en 2014. Vous ne vous souciez probablement plus de IE8 et pouvez oublier d'utiliser innerText . Suffit d'utiliser textContent et être fait avec elle, 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), alors le réglage 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';

cependant, comme d'autres le font remarquer, si vous ne sont pas la source pour n'importe quelle partie de la chaîne de texte, en utilisant innerHTML peut vous soumettre à des attaques d'injection de contenu comme XSS si vous n'êtes pas prudent de nettoyer correctement le texte d'abord.

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 les navigateurs:

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

Firefox ne supporte pas innerText et IE8 ne supporte pas textContent donc vous devez utiliser les deux si vous voulez maintenir la compatibilité inter-navigateur.

et si vous voulez éviter les retours (causés par innerText ) si possible:

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

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");

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 manière 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 supporte l'une ou l'autre de ces propriétés et si oui, assigne le "newtext".

Live demo: here

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 supporté, vous pouvez le vérifier: http://caniuse.com/#search=textContent

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

sélectionnez dom-node avec id myspan et modifiez le contenu du texte en new text

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

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

si vous avez besoin d'étendre la réponse pour obtenir /modifier html contenu d'une portée ou d'éléments div, vous pouvez le faire:

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

, les Références:

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

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

pour cette portée

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

Vous pouvez aller comme ceci :-

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