Como substituo o texto dentro de um elemento div?

Eu preciso definir o texto dentro de um elemento DIV dinamicamente. Qual é a melhor abordagem segura para o navegador? Eu tenho prototypejs e scriptaculous disponíveis.

<div id="panel">
  <div id="field_name">TEXT GOES HERE</div>
</div>

Aqui está a aparência da função:

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById('field_name');
  //Make replacement here
}

Eu usaria o updatemétodo Prototype, que suporta texto sem formatação, um trecho de HTML ou qualquer objeto JavaScript que defina um toStringmétodo.

$("field_name").update("New text");

• Documentação do Element.update

Você pode simplesmente usar:

fieldNameElement.innerHTML = "My new text!";

Atualizado para todos que leem isso em 2013 e posteriores:

Essa resposta tem muito SEO, mas todas as respostas estão seriamente desatualizadas e dependem de bibliotecas para fazer o que todos os navegadores atuais fazem de imediato.

Para substituir o texto dentro de um elemento div, use Node.textContent, que é fornecido em todos os navegadores atuais.

fieldNameElement.textContent = "New text";

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById("field_name");
  while(fieldNameElement.childNodes.length >= 1) {
    fieldNameElement.removeChild(fieldNameElement.firstChild);
  }
  fieldNameElement.appendChild(fieldNameElement.ownerDocument.createTextNode(fieldName));
}

As vantagens de fazê-lo desta maneira:

1. Ele usa apenas o DOM, portanto, a técnica é portátil para outros idiomas e não depende do innerHTML não padrão
2. fieldName pode conter HTML, que pode ser uma tentativa de ataque XSS. Se sabemos que é apenas texto, devemos criar um nó de texto, em vez de o navegador analisá-lo em HTML

Se eu fosse usar uma biblioteca javascript, usaria o jQuery e faria o seguinte:

  $("div#field_name").text(fieldName);

Observe que o comentário de @AnthonyWJones está correto: "field_name" não é um ID ou nome de variável particularmente descritivo.

$('field_name').innerHTML = 'Your text.';

Uma das características bacanas do Prototype é que $('field_name') faz a mesma coisa que document.getElementById('field_name'). Use-o! :-)

A resposta de John Topley usando a updatefunção Prototype é outra boa solução.

A resposta rápida é usar innerHTML (ou o método de atualização do protótipo que praticamente faz a mesma coisa). O problema com o innerHTML é que você precisa escapar do conteúdo que está sendo atribuído. Dependendo dos seus alvos, você precisará fazer isso com outro código OU

no IE: -

document.getElementById("field_name").innerText = newText;

em FF: -

document.getElementById("field_name").textContent = newText;

(Na verdade, da FF tem o seguinte presente no código)

HTMLElement.prototype.__defineGetter__("innerText", function () { return this.textContent; })

HTMLElement.prototype.__defineSetter__("innerText", function (inputText) { this.textContent = inputText; })

Agora eu posso usar o innerText se você precisar do suporte mais amplo possível ao navegador, então essa não é uma solução completa, mas também não é o innerHTML no estado bruto.

Se você realmente deseja que continuemos de onde parou, você pode:

if (fieldNameElement)
    fieldNameElement.innerHTML = 'some HTML';

nodeValue também é uma propriedade DOM padrão que você pode usar:

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById(field_name);
  if(fieldNameElement.firstChild)
    fieldNameElement.firstChild.nodeValue = "New Text";
}

el.innerHTML='';
el.appendChild(document.createTextNode("yo"));

Se você está inclinado a começar a usar muito JavaScript em seu site, o jQuery torna extremamente simples jogar com o DOM.

http://docs.jquery.com/Manipulation

Torna tão simples quanto: $ ("# field-name"). Text ("Some new text.");

Use innerText se você não puder assumir a estrutura - Use Text # data para atualizar o texto existente Performance Test

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById(field_name);

  fieldNameElement.removeChild(fieldNameElement.firstChild);
  var newText = document.createTextNode("New Text");
  fieldNameElement.appendChild(newText);
}

Aqui está uma maneira fácil do jQuery :

var el = $('#yourid .yourclass');

el.html(el.html().replace(/Old Text/ig, "New Text"));

Em HTML, coloque isso

<div id="field_name">TEXT GOES HERE</div>

Em Javascript coloque isso

var fieldNameElement = document.getElementById('field_name');
        if (fieldNameElement)
        {fieldNameElement.innerHTML = 'some HTML';}