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

Question

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

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

Así es como se verá la función:

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

Answer 1

Yo usaría Prototype update método que admite texto sin formato, un fragmento de HTML o cualquier objeto JavaScript que defina un toString método.

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

• Documentación de actualización de elementos

Answer 2

Simplemente puedes usar:

fieldNameElement.innerHTML = "My new text!";

Answer 3

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 bibliotecas para hacer cosas que todos los navegadores actuales hacen de forma inmediata.

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

fieldNameElement.textContent = "New text";

Answer 4

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 utiliza DOM, por lo que la técnica es portátil a otros lenguajes y no depende del HTML interno no estándar.
2. fieldName puede contener HTML, lo 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 en busca de HTML.

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

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

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

Answer 5

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

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

La respuesta de John Topley usando Prototype update La función es otra buena solución.

Answer 6

La respuesta rápida es usar internalHTML (o el método de actualización del prototipo, que es más o menos lo mismo).El problema con InnerHTML es que necesitas escapar del contenido que se asigna.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, los FF tienen lo siguiente presente por código)

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

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

Ahora puedo usar InnerText si necesita la mayor compatibilidad posible con el navegador, entonces esta no es una solución completa, pero tampoco lo es usar InnerHTML sin formato.

Answer 7

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

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

Answer 8

nodeValue también es una propiedad DOM estándar que puedes usar:

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

Answer 9

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

Answer 10

Si está dispuesto a empezar a utilizar mucho JavaScript en su sitio, jQuery hace que jugar con el DOM sea extremadamente sencillo.

http://docs.jquery.com/Manipulación

Lo hace tan simple como:$("#field-name").text("Algún texto nuevo.");

Answer 11

Use InnteText si no puede asumir la estructura: use los datos de#de texto para actualizar el texto existentePrueba de rendimiento

Answer 12

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

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

Answer 13

Aquí tienes una fácil jQuery forma:

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

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