¿Cómo cambio el texto de un elemento usando JavaScript?

si tengo un durardecir:

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

¿Cómo uso JavaScript para cambiar “hereismytext” a “newtext”?

Para los navegadores modernos, debe usar:

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

Si bien es posible que los navegadores más antiguos no sepan textContentno se recomienda su uso innerHTML ya que presenta una vulnerabilidad XSS cuando el nuevo texto es ingresado por el usuario (vea otras respuestas a continuación para una discusión más detallada):

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

Usando HTML interno es TAN NO RECOMENDADO. En su lugar, debe crear un textNode. De esta manera, está “vinculando” su texto y no es, al menos en este caso, vulnerable a un ataque XSS.

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

La direccion correcta:

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

Para más información sobre esta vulnerabilidad:
Secuencias de comandos entre sitios (XSS) – OWASP

Editado el 4 de noviembre de 2017:

Se modificó la tercera línea de código según la sugerencia de @mumush: “use appendChild(); en su lugar”.

Por cierto, según @Jimbo Jonny, creo que todo debe tratarse como entrada del usuario aplicando el principio de seguridad por capas. Así no te encontrarás con sorpresas.

EDITAR: Esto fue escrito en 2014. Mucho ha cambiado. Probablemente ya no te importe IE8. Y Firefox ahora es compatible innerText.

Si usted es el que proporciona el texto y el usuario (o alguna otra fuente que no controla) no proporciona ninguna parte del texto, entonces establezca innerHTML podría ser aceptable:

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

Sin embargo, como otros señalan, si no es la fuente de ninguna parte de la cadena de texto, al usar innerHTML puede someterlo a ataques de inyección de contenido como XSS si no tiene cuidado de desinfectar correctamente el texto primero.

Si está utilizando la entrada del usuario, aquí hay una forma de hacerlo de forma segura y al mismo tiempo mantener la compatibilidad entre navegadores:

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

Firefox no es compatible innerText e IE8 no es compatible textContent por lo tanto, debe usar ambos si desea mantener la compatibilidad entre navegadores.

Y si quiere evitar reflujos (causados ​​por innerText) donde sea posible:

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

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

yo suelo Jquery y nada de lo anterior ayudó, no sé por qué, pero esto funcionó:

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

Aquí hay otra manera:

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

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

Safari, Google Chrome y MSIE detectarán la propiedad innerText. Para Firefox, la forma estándar de hacer las cosas era usar textContent, pero desde la versión 45 también tiene una propiedad innerText, como alguien amablemente me informó recientemente. Esta solución comprueba si un navegador admite alguna de estas propiedades y, de ser así, asigna el “texto nuevo”.

Demo en vivo: aquí

Además de las respuestas de javascript puras anteriores, puede usar jQuery texto método de la siguiente manera:

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

Si necesita extender la respuesta para obtener/cambiar html contenido de un elemento span o div, puede hacer esto:

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

Referencias:

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

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