Come posso modificare il testo di un elemento span in JavaScript

Se ho una durata, dì:

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

Come posso usare JavaScript per cambiare "hereismytext" in "newtext"?

Per i browser moderni dovresti usare:

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

Anche se i browser meno recenti potrebbero non saperlo textContent, non è consigliabile utilizzarlo innerHTMLpoiché introduce una vulnerabilità XSS quando il nuovo testo è inserito dall'utente (vedi altre risposte di seguito per una discussione più dettagliata):

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

L'uso di innerHTML è per questo la sconsigliamo . Invece, dovresti creare un textNode. In questo modo, stai "legando" il tuo testo e non sei, almeno in questo caso, vulnerabile a un attacco XSS.

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

Il modo giusto:

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

Per ulteriori informazioni su questa vulnerabilità: Cross Site Scripting (XSS) - OWASP

Modificato il 4 novembre 2017:

Modificata terza riga di codice secondo il suggerimento di @mumush : "usa appendChild (); invece".
A proposito, secondo @Jimbo Jonny penso che tutto dovrebbe essere trattato come input dell'utente applicando il principio Sicurezza per livelli. In questo modo non incontrerai sorprese.

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

EDIT: Questo è stato scritto nel 2014. Probabilmente non ti interessa più di IE8 e puoi dimenticarti di usarlo innerText. Basta usaretextContent e da fare con esso, evviva.

Se sei tu a fornire il testo e nessuna parte del testo viene fornita dall'utente (o qualche altra fonte che non controlli), l'impostazione innerHTMLpotrebbe essere accettabile:

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

Tuttavia, come altri notano, se non sei la fonte per qualsiasi parte della stringa di testo, usando innerHTML può sottoporti ad attacchi di iniezione di contenuto come XSS se non stai attento a disinfettare correttamente il testo prima.

Se stai utilizzando l'input dell'utente, ecco un modo per farlo in modo sicuro, mantenendo allo stesso tempo la compatibilità tra browser:

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

Firefox non supporta innerTexte IE8 non supportatextContent quindi è necessario utilizzare entrambi se si desidera mantenere la compatibilità tra browser.

E se vuoi evitare i reflow (causati da innerText) dove possibile:

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

Io uso Jquerye nessuna delle precedenti ha aiutato, non so perché ma questo ha funzionato:

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

Ecco un altro modo:

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

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

La proprietà innerText verrà rilevata da Safari, Google Chrome e MSIE. Per Firefox, il modo standard di fare le cose era usare textContent ma anche dalla versione 45 ha una proprietà innerText, come qualcuno mi ha gentilmente informato di recente. Questa soluzione verifica se un browser supporta una di queste proprietà e, in tal caso, assegna il "nuovo testo".

Demo live: qui

Oltre alle pure risposte javascript sopra, è possibile utilizzare il metodo di testo jQuery come segue:

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

Se è necessario estendere la risposta per ottenere / modificare il contenuto html di uno span o di elementi div, è possibile farlo:

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

Riferimenti:

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

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

Puoi anche usare il metodo querySelector (), supponendo che l'id 'myspan' sia univoco in quanto il metodo restituisce il primo elemento con il selettore specificato:

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

developer.mozilla

Come in altre risposte, innerHTML e innerText non sono raccomandati, è meglio usare textContent . Questo attributo è ben supportato, puoi verificarlo qui: http://caniuse.com/#search=textContent

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

questo selezionerà dom-node con id myspane lo cambierà in contenuto di testonew text

Tu puoi fare

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

Per questo periodo

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

Puoi andare così: -

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