web-dev-qa-db-fra.com

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

Je dois 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 prototypejs et 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
}
javascripthtmldom
159
sblundy

J'utiliserais la méthode update de Prototype qui prend en charge le texte brut, un extrait de code HTML ou tout objet JavaScript définissant une méthode toString.

$("field_name").update("New text");
47
John Topley

Vous pouvez simplement utiliser:

fieldNameElement.innerHTML = "My new text!";
243
17 of 26

Mis à jour pour tous ceux qui liront ceci en 2013 et plus tard:

Cette réponse a beaucoup de référencement, mais toutes les réponses sont extrêmement obsolètes et dépendent des bibliothèques pour faire des choses que tous les navigateurs actuels font de la boîte.

Pour remplacer du texte dans un élément div, utilisez Node.textContent, fourni par tous les navigateurs actuels.

fieldNameElement.textContent = "New text";
155
mikemaccana

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 utilise uniquement le DOM, de sorte que la technique est portable vers d'autres langages et ne repose pas sur le langage innerHTML non standard.
  2. fieldName pourrait 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 le faire analyser par le navigateur pour HTML.

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


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

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

75
Daniel Papasian
$('field_name').innerHTML = 'Your text.';

Une des caractéristiques intéressantes de Prototype est que $('field_name') fait la même chose que document.getElementById('field_name'). Utilise le! :-)

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

17
ceejayoz

La réponse rapide consiste à utiliser innerHTML (ou la méthode de mise à jour du prototype qui correspond à peu près à la même chose). Le problème avec innerHTML est que vous devez échapper au contenu attribué. En fonction de vos cibles, 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 codes suivants sont présents dans FF)

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 du support le plus large possible de votre navigateur. Il ne s'agit pas d'une solution complète, mais de l'utilisation de innerHTML à l'état brut.

15
AnthonyWJones

Si vous voulez vraiment que nous continuions là où vous en étiez, vous pourriez faire:

if (fieldNameElement)
    fieldNameElement.innerHTML = 'some HTML';
6
Milan Babuškov

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";
}
4
palswim
el.innerHTML='';
el.appendChild(document.createTextNode("yo"));
3
Adrian Adkison

Si vous êtes enclin à commencer à utiliser beaucoup de JavaScript sur votre site, jQuery simplifie grandement la lecture avec le DOM.

http://docs.jquery.com/Manipulation

C'est aussi simple que: $ ("# nom de champ"). Text ("Du nouveau texte.");

1
Steve Perks

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

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

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

Voici un moyen simple jQuery :

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

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