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

Si tengo un lapso, di:

<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 los navegadores más antiguos pueden no saberlo textContent, no se recomienda su uso, innerHTMLya que introduce una vulnerabilidad XSS cuando el nuevo texto es ingresado por el usuario (consulte otras respuestas a continuación para obtener una discusión más detallada):

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

Usando innerHTML está tanto no está indicada . 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 obtener más información sobre esta vulnerabilidad: Cross Site Scripting (XSS) - OWASP

Editado el 4 de noviembre de 2017:

Tercera línea de código modificada de acuerdo con la sugerencia de @mumush : "use appendChild (); en su lugar".
Por cierto, según @Jimbo Jonny , creo que todo debería tratarse como una entrada del usuario aplicando el principio de Seguridad por capas. De esa manera no encontrarás sorpresas.

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

EDITAR: Esto fue escrito en 2014. Probablemente ya no te importe IE8 y puedas olvidarte de usarlo innerText. Solo úsalo textContenty listo, hurra.

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 la configuración innerHTMLpuede 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 usted no es la fuente de ninguna parte de la cadena de texto, el uso innerHTMLpuede 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 innerTexte IE8 no es compatible, textContentpor lo que debe usar ambos si desea mantener la compatibilidad entre navegadores.

Y si desea evitar los reflujos (causados ​​por innerText) cuando sea posible:

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

Yo uso Jqueryy ninguno de los anteriores ayudó, no sé por qué, pero esto funcionó:

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

Aquí hay otra forma:

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, ya que alguien me informó amablemente recientemente. Esta solución prueba para ver si un navegador admite cualquiera de estas propiedades y, de ser así, asigna el "nuevo texto".

Demostración en vivo: aquí

Además de las respuestas de JavaScript puro anteriores, puede usar el método de texto jQuery de la siguiente manera:

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

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

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

Referencias

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

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

También puede usar el método querySelector (), suponiendo que la identificación 'myspan' es única ya que el método devuelve el primer elemento con el selector especificado:

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

desarrollador.mozilla

Como en otras respuestas, innerHTML e innerText no se recomiendan, es mejor usar textContent . Este atributo está bien soportado, puede verificarlo aquí: http://caniuse.com/#search=textContent

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

esto seleccionará dom-node con id myspany cambiará el contenido de texto anew text

Tu puedes hacer

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

Para este lapso

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

Puedes ir así: -

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