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

StackOverflow https://stackoverflow.com/questions/121817

  •  02-07-2019
  •  | 
  •  

Question

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
}
Était-ce utile?

La solution

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

Autres conseils

Vous pouvez simplement utiliser: 

fieldNameElement.innerHTML = "My new text!";

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

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 de la boîte.

Pour remplacer le texte à l'intérieur d'un élément div, utilisez Node. .textContent, fourni avec 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 utilise uniquement 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 code HTML, 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 procéderais ainsi: 


  $("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. 

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

Une des fonctionnalités intéressantes de Prototype est que $ ('nom_zone') a la même fonction que document.getElementById ('nom_zone') . Utilise le! : -)

La réponse de John Topley avec la fonction update de Prototype est une autre bonne solution.

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;

dans FF: - 

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

(En réalité, 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 pour votre navigateur. Il ne s'agit pas d'une solution complète, mais de l'utilisation de innerHTML à l'état brut.

Si vous voulez vraiment que nous continuions là où vous en étiez, vous pourriez 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 simplifie grandement la lecture avec le DOM.

http://docs.jquery.com/Manipulation

Rendez-le aussi simple que: $ ("# nom-champ"). text ("Un nouveau texte.");

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

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 facile pour jQuery : 

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

el.html(el.html().replace(/Old Text/ig, "New Text"));
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top