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

innerhtml jquery ejemplos

Question

Necesito configurar el texto dentro de un elemento DIV de forma dinámica. ¿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í es como se verá la función:

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

Answer 1

Aquí hay una forma sencilla de jQuery :

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

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

Answer 2

La respuesta rápida es usar innerHTML (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 te asigna. Dependiendo de tus objetivos deberás hacer eso con otro código O

en IE: -

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

en FF: -

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

(En realidad, FF tiene el siguiente presente en el 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 usa innerHTML en bruto.

Answer 3

Puedes simplemente usar:

fieldNameElement.innerHTML = "My new text!";

Answer 4

Si realmente quieres que continuemos donde lo dejaste, podrías hacer:

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

Answer 5

Si te inclinas a comenzar a usar mucho JavaScript en tu sitio, jQuery hace que jugar con DOM sea extremadamente simple.

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

Answer 6

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

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

• Elemento.actualización de la documentación

Answer 7

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

Answer 8

Actualizado para todos los que lean esto en 2013 y después:

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 la caja.

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

fieldNameElement.textContent = "New text";

Answer 9

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 el DOM, por lo que la técnica es portátil para otros idiomas, y no depende del innerHTML no estándar.
2. fieldName podría 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 tener que analizarlo en HTML.

Si fuera a utilizar una biblioteca de 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 un nombre de identificación o variable particularmente descriptivo.

Answer 10

$(''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'') . Úselo! :-)

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

Answer 11

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

Answer 12

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

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