Como altero o texto de um elemento span em JavaScript

Se eu tiver um espaço, diga:

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

Como uso o JavaScript para alterar "hereismytext" para "newtext"?

Para navegadores modernos, você deve usar:

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

Embora os navegadores mais antigos não saibam textContent, não é recomendável usá- innerHTMLlo, pois apresenta uma vulnerabilidade XSS quando o novo texto é uma entrada do usuário (consulte outras respostas abaixo para obter uma discussão mais detalhada):

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

Usando innerHTML é SO NÃO RECOMENDADO . Em vez disso, você deve criar um textNode. Dessa forma, você está "vinculando" seu texto e não é, pelo menos nesse caso, vulnerável a um ataque XSS.

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

O caminho certo:

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

Para mais informações sobre esta vulnerabilidade: Cross Site Scripting (XSS) - OWASP

Editado em 4 de novembro de 2017:

Terceira linha de código modificada de acordo com a sugestão @mumush : "use appendChild (); em vez disso".
Aliás, de acordo com @Jimbo Jonny , acho que tudo deve ser tratado como entrada do usuário, aplicando o princípio Segurança por camadas. Dessa forma, você não encontrará nenhuma surpresa.

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

EDIT: Isso foi escrito em 2014. Você provavelmente não se importa mais com o IE8 e pode esquecer de usá-lo innerText. Basta usar textContente acabar com isso, viva.

Se você for quem fornece o texto e nenhuma parte do texto é fornecida pelo usuário (ou alguma outra fonte que você não controla), a configuração innerHTMLpode ser aceitável:

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

No entanto, como outros observam, se você não é a fonte de qualquer parte da cadeia de texto, o uso innerHTMLpode sujeitá-lo a ataques de injeção de conteúdo como o XSS, se você não tomar cuidado para limpar o texto primeiro.

Se você estiver usando informações do usuário, aqui está uma maneira de fazê-lo com segurança, mantendo também a compatibilidade entre navegadores:

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

O Firefox não suporta innerTexte o IE8 não suporta, textContentportanto, você precisará usar os dois se quiser manter a compatibilidade entre navegadores.

E se você quiser evitar refluxos (causados ​​por innerText) sempre que possível:

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

Eu uso Jquerye nenhuma das opções acima ajudou, não sei por que, mas isso funcionou:

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

Aqui está outra maneira:

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

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

A propriedade innerText será detectada pelo Safari, Google Chrome e MSIE. Para o Firefox, a maneira padrão de fazer as coisas era usar o textContent, mas desde a versão 45 ela também possui uma propriedade innerText, como alguém gentilmente me avisou recentemente. Esta solução testa para verificar se um navegador suporta uma dessas propriedades e, se houver, atribui o "novo texto".

Demonstração ao vivo: aqui

Além das respostas puras de javascript acima, você pode usar o método de texto jQuery da seguinte maneira:

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

Se você precisar estender a resposta para obter / alterar o conteúdo html de um elemento span ou div, faça o seguinte:

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

Referências:

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

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

Você também pode usar o método querySelector (), assumindo que o ID 'myspan' seja único, pois o método retorna o primeiro elemento com o seletor especificado:

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

developer.mozilla

Como em outra resposta, innerHTML e innerText não são recomendados, é melhor usar textContent . Esse atributo é bem suportado, você pode verificar isso: http://caniuse.com/#search=textContent

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

isso selecionará nó-dom com id myspane alterará o conteúdo de texto paranew text

Você pode fazer

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

Para este período

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

Você pode ir assim: -

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