javascript - significado - span html para que sirve

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

Question

Si tengo un lapso, diga:

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

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

Answer 1

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

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

Si necesita ampliar la respuesta para obtener / cambiar el contenido html de un elemento de división o div, puede hacer esto:

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

Referencias:

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

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

Answer 2

Aquí hay 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 de texto interior, como alguien me informó recientemente. Esta solución prueba si un navegador admite alguna de estas propiedades y, de ser así, asigna el "nuevo texto".

Demostración en vivo: here

Answer 3

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

Answer 4

El uso de innerHTML NO SE RECOMIENDA . En su lugar, debe crear un textNode. De esta forma, estás "enlazando" tu texto y no eres, al menos en este caso, vulnerable a un ataque XSS.

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

La manera 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:

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

Answer 5

Para este lapso

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

Puedes ir así: -

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

Answer 6

Uso Jquery y ninguno de los anteriores me ayudó. No sé por qué, pero esto funcionó:

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

Answer 7

EDITAR: Esto fue escrito en 2014. Probablemente ya no te importe IE8 y puedas olvidarte de usar innerText . Solo usa textContent y textContent con eso, hooray.

Si usted es quien proporciona el texto y el usuario no proporciona ninguna parte del texto (o alguna otra fuente que no controle), entonces la configuración de 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 señalan otros, si no es el origen de alguna parte de la cadena de texto, el uso de 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 información del usuario, esta es una forma de hacerlo de forma segura y al mismo tiempo mantener la compatibilidad con varios navegadores:

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

Firefox no es compatible con innerText y IE8 no es compatible con textContent por lo que debe usar ambos si desea mantener la compatibilidad entre textContent navegadores.

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

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

Answer 8

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

EDITAR para los navegadores modernos:

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

Answer 9

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

esto seleccionará dom-node con id myspan y cambiará el contenido del texto a new text

Answer 10

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