Comment remplacer du texte dans un élément div?

J'ai besoin de définir le texte dans un élément DIV de manière dynamique. Quelle est la meilleure approche sécurisée pour le navigateur? J'ai des prototypes et des scriptaculous disponibles.

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

Voici à quoi ressemblera la fonction:

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

J'utiliserais la updateméthode de Prototype qui prend en charge le texte brut, un extrait de code HTML ou tout objet JavaScript qui définit une toStringméthode.

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

• Documentation Element.update

Vous pouvez simplement utiliser:

fieldNameElement.innerHTML = "My new text!";

Mis à jour pour tous ceux qui liront ceci en 2013 et après:

Cette réponse a beaucoup de SEO, mais toutes les réponses sont sérieusement obsolètes et dépendent des bibliothèques pour faire des choses que tous les navigateurs actuels font hors de la boîte.

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

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

Les avantages de le faire de cette façon:

1. Il n'utilise que le DOM, donc la technique est portable dans d'autres langages et ne repose pas sur le innerHTML non standard
2. fieldName peut contenir du HTML, ce qui pourrait être une tentative d'attaque XSS. Si nous savons que ce n'est que du texte, nous devrions créer un nœud de texte, au lieu de demander au navigateur de l'analyser pour HTML

Si j'allais utiliser une bibliothèque javascript, j'utiliserais jQuery et ferais ceci:

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

Notez que le commentaire de @AnthonyWJones est correct: "field_name" n'est pas un identifiant ou un nom de variable particulièrement descriptif.

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

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

La réponse de John Topley en utilisant la updatefonction de Prototype est une autre bonne solution.

La réponse rapide est d'utiliser innerHTML (ou la méthode de mise à jour du prototype qui est à peu près la même chose). Le problème avec innerHTML est que vous devez échapper au contenu attribué. En fonction de vos objectifs, vous devrez le faire avec un autre code OU

dans IE: -

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

en FF: -

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

(En fait, les FF ont les éléments suivants présents par code)

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

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

Maintenant, je peux simplement utiliser innerText si vous avez besoin d'une prise en charge de navigateur la plus large possible, ce n'est pas une solution complète, mais l'utilisation de innerHTML non plus dans le brut.

Si vous voulez vraiment que nous continuions là où vous vous êtes arrêté, vous pouvez faire:

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

nodeValue est également une propriété DOM standard que vous pouvez utiliser:

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 vous êtes enclin à commencer à utiliser beaucoup de JavaScript sur votre site, jQuery rend le jeu avec le DOM extrêmement simple.

http://docs.jquery.com/Manipulation

Le rend aussi simple que: $ ("# field-name"). Text ("Some new text.");

Utilisez innerText si vous ne pouvez pas assumer la structure - Utilisez les données Text # pour mettre à jour le test de performance du texte existant

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

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

Voici un moyen simple de jQuery :

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

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

En HTML, mettez ceci

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

En Javascript, mettez ceci

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