Remplacer le texte à l'intérieur d'un élément DIV avec Prototype.js

Question

J'ai besoin de mettre le texte dans un élément DIV dynamiquement. Quel est le meilleur navigateur de l'approche sécuritaire? J'ai prototypejs et scriptaculous disponibles.

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

Voici ce que la fonction ressemble à:

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

Answer 1

Faut juste être

fieldNameElement.innerHTML = "Ny new text!";

Answer 2

Mise à jour pour tout le monde la lecture de ce en 2013 et au plus tard:

Cette réponse a beaucoup de SEO, mais toutes les réponses sont gravement de la date et dépendent les bibliothèques à faire des choses que tous les navigateurs actuels ne hors de la boîte.

Pour remplacer du texte à l'intérieur d'un élément div, utiliser un Nœud.textContent, qui est fourni dans tous les navigateurs actuels.

Answer 3

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

Les avantages de faire de cette façon:

1. Il n'utilise que les DOM, donc la technique est transférable vers d'autres langues, et ne pas compter sur la non-standard innerHTML
2. nom de champ peut contenir du HTML, ce qui pourrait être une tentative d'attaque XSS. Si nous savons que c'est juste le texte, nous devrions être en train de créer un nœud de texte, au lieu d'avoir le navigateur de l'analyser pour le HTML

Si je devais utiliser une bibliothèque javascript, j'utilise jQuery, et de faire cela:

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

Notez que @AnthonyWJones' commentaire est correcte: "field_name" n'est pas vraiment un descriptif de l'id ou le nom de la variable.

Answer 4

Je voudrais utiliser du Prototype update méthode qui prend en charge le format texte, un extrait de code HTML ou un objet JavaScript qui définit un toString méthode.

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

• De l'élément.mise à jour de la documentation

Answer 5

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

Une des fonctionnalités intéressantes de Prototype est $('field_name') fait la même chose que document.getElementById('field_name'). L'utiliser! :-)

Jean Topley de la réponse à l'aide du Prototype update fonction est une autre bonne solution.