¿Cómo reemplazo el texto dentro de un elemento div?

Necesito establecer el texto dentro de un elemento DIV dinámicamente. ¿Cuál es el mejor enfoque seguro para el navegador? Tengo prototypejs y scriptaculous disponibles.

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

Así se verá la función:

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

Usaría el updatemétodo de Prototype que admite texto sin formato, un fragmento de HTML o cualquier objeto de JavaScript que defina un toStringmétodo.

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

• Documentación de Element.update

Simplemente puede usar:

fieldNameElement.innerHTML = "My new text!";

Actualizado para todos los que lean esto en 2013 y posteriores:

Esta respuesta tiene mucho SEO, pero todas las respuestas están muy desactualizadas y dependen de las bibliotecas para hacer cosas que todos los navegadores actuales hacen de forma inmediata.

Para reemplazar el texto dentro de un elemento div, use Node.textContent, que se proporciona en todos los navegadores actuales.

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));
}

Las ventajas de hacerlo de esta manera:

1. Solo usa DOM, por lo que la técnica es portátil a otros idiomas y no se basa en el innerHTML no estándar
2. fieldName podría contener HTML, que podría ser un intento de ataque XSS. Si sabemos que es solo texto, deberíamos crear un nodo de texto, en lugar de que el navegador lo analice para HTML

Si fuera a usar una biblioteca javascript, usaría jQuery y haría esto:

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

Tenga en cuenta que el comentario de @AnthonyWJones es correcto: "field_name" no es una identificación particularmente descriptiva o un nombre de variable.

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

Una de las características ingeniosas de Prototype es que $('field_name')hace lo mismo quedocument.getElementById('field_name') . Úsalo! :-)

La respuesta de John Topley usando la updatefunción de Prototype es otra buena solución.

La respuesta rápida es usar innerHTML (o el método de actualización del prototipo que es casi lo mismo). El problema con innerHTML es que necesita escapar del contenido asignado. Dependiendo de sus objetivos, deberá hacerlo con otro código O

en IE: -

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

en FF: -

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

(En realidad, de FF tiene el siguiente presente por código)

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

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

Ahora solo puedo usar innerText si necesita el soporte de navegador más amplio posible, entonces esta no es una solución completa pero tampoco está usando innerHTML en bruto.

Si realmente quieres que continuemos donde lo dejaste, puedes hacer:

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

nodeValue también es una propiedad DOM estándar que puede 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"));

Si está dispuesto a comenzar a usar mucho JavaScript en su sitio, jQuery hace que jugar con DOM sea extremadamente simple.

http://docs.jquery.com/Manipulation

Lo hace tan simple como: $ ("# nombre-campo"). Text ("Algún texto nuevo");

Utilice innerText si no puede asumir la estructura: use los datos de Text # para actualizar la prueba de rendimiento de texto existente

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

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

Aquí hay una manera fácil de jQuery :

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

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

En HTML pon esto

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

En Javascript pon esto

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