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

Question

Si tengo un palmo, dicen:

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

¿Cómo uso de JavaScript para cambiar "hereismytext" a "newText"?

Answer 1

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

EDITAR Para los navegadores modernos:

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

Answer 2

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

Answer 3

Usando innerHtml es tanto no está indicada. En su lugar, debe crear un textNode. De esta manera, estás "vinculando" tu texto y no eres, al menos en este caso, vulnerable a un ataque XSS.

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

La forma correcta:

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

Para obtener más información acerca de esta vulnerabilidad: Cross Site Scripting (XSS) - OWASP

Editado Nov 4 º 2017

Modificado tercera línea de código de acuerdo con @mumush sugerencia: "use appendChild(); en su lugar".
Por cierto, de acuerdo con @Jimbo Jonny Creo que todo debe tratarse como la entrada del usuario aplicando el principio de Seguridad por capas. De esa forma no encontrarás sorpresas.

Answer 4

Si usted es el que presenta el texto y ninguna parte del texto es suministrada por el usuario (o alguna otra fuente que no se ejerce control), a continuación, establecer innerHTML está muy 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'; 

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

Si está utilizando la entrada del usuario, aquí es una manera de hacerlo de forma segura a la vez que se mantiene la compatibilidad entre navegadores:

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

Firefox no soporta innerText e IE8 no soporta de manera textContent necesita usar ambos si desea mantener la compatibilidad entre navegadores.

Y si se quiere evitar reflujos (causada por innerText) cuando sea posible:

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

Answer 5

Ésta es otra manera:

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

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

La propiedad innerText será detectada por Safari, Google Chrome y MSIE . Para Firefox, la forma estándar de hacer las cosas era usar textContent, pero desde la versión 45 también tiene una propiedad internalText, como alguien me ha informado 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 directo: here

Answer 6

utilizo Jquery y ninguna de las anteriores ayudaron, no sé por qué, pero esto funcionó:

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

Answer 7

Al igual que en otra respuesta, innerHtml y innerText no se recomiendan, es mejor usar textContent. Este atributo está bien soportado, se puede comprobar esto: http://caniuse.com/#search=textContent

Answer 8

Para este lapso

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

Usted puede ir de esta manera: -

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