JavaScript ajoute des données à la div

Pour ajouter des données à un div existant, sélectionnez-le et choisissez une méthode selon que la nouvelle valeur est du texte brut ou du HTML fiable. Pour du texte ordinaire, textContent ou un nœud texte évite l’analyse du HTML. Utilisez insertAdjacentHTML lorsque vous voulez intentionnellement ajouter du balisage. Les exemples ci-dessous supposent que la page contient un élément <div id="myDiv"> avant l’exécution du script. (JavaScript)

Choisir une méthode selon le contenu à ajouter

Utilisez textContent ou createTextNode pour les saisies utilisateur et les autres textes bruts. Ces API créent du texte au lieu d’interpréter des caractères tels que < comme du balisage. Pour ajouter un nouvel élément avec du texte ou des attributs, créez-le et ajoutez-le comme nœud.

Utilisez insertAdjacentHTML lorsque vous disposez d’une chaîne HTML que vous contrôlez et que vous souhaitez faire analyser en éléments. Évitez innerHTML += pour ajouter du contenu à un élément déjà rempli : lire puis réaffecter innerHTML entraîne une nouvelle analyse du contenu et remplace les nœuds descendants. Ces nœuds sont retirés de l’arbre de remplacement, mais les références JavaScript existantes pointent toujours vers les nœuds détachés. Leurs écouteurs restent attachés à ces anciens nœuds et ne s’appliquent pas aux nœuds de remplacement. Le bon choix dépend du type de contenu, et non d’un classement général des performances.

Ajouter du texte brut avec textContent ou appendChild

Cet exemple crée un paragraphe, lui attribue son texte, puis ajoute le nouveau nœud au div sélectionné. getElementById renvoie null si la page ne contient aucun élément correspondant : vérifiez donc le résultat avant de l’utiliser.

Exécutez cet exemple dans une page qui contient l’élément cible :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    const paragraph = document.createElement("p");
    paragraph.textContent = "A new paragraph.";
    target.appendChild(paragraph);
  }
}

Cet exemple dans un navigateur n’a pas été exécuté selon les éléments fournis. Si l’élément cible existe, il ajoute un paragraphe dont le contenu est du texte. Vous pouvez aussi créer directement un nœud texte avec document.createTextNode("More text") et transmettre ce nœud à appendChild si vous n’avez pas besoin d’un élément conteneur.

Ajouter du HTML avec insertAdjacentHTML

Appelez insertAdjacentHTML sur l’élément cible en lui transmettant une position et une chaîne HTML. beforeend place les nœuds analysés à l’intérieur du div, après ses enfants actuels. Les autres positions sont afterbegin (à l’intérieur, avant ses enfants), beforebegin (juste à l’extérieur, avant l’élément) et afterend (juste à l’extérieur, après l’élément).

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    target.insertAdjacentHTML("beforeend", "<p>A new paragraph.</p>");
  }
}

Cet exemple dans un navigateur n’a pas été exécuté selon les éléments fournis. Utilisez cette méthode uniquement si vous souhaitez que la chaîne fournie soit analysée comme du HTML ; elle ne nettoie pas les données non fiables. La position beforeend convient lorsque le nouveau balisage doit être ajouté à la fin du div, à l’intérieur de celui-ci.

Utiliser innerHTML avec précaution

innerHTML expose le balisage d’un élément sous forme de chaîne. La concaténation d’une chaîne suivie de sa réaffectation peut ressembler à un ajout, mais le navigateur analyse le résultat et remplace les descendants de l’élément. Les nœuds descendants existants sont détachés de l’arbre de remplacement, mais les références continuent de pointer vers ces anciens nœuds et leurs écouteurs y restent attachés ; ces écouteurs ne s’appliquent pas aux nœuds de remplacement. Évitez d’utiliser innerHTML avec des données non fiables : le navigateur interprète la valeur comme du balisage, ce qui peut créer des vulnérabilités de type cross-site scripting (XSS).

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    target.innerHTML = target.innerHTML + "<p>A new paragraph.</p>";
  }
}

Cet exemple dans un navigateur n’a pas été exécuté selon les éléments fournis. Il illustre le comportement de réaffectation ; ce n’est pas la méthode à privilégier pour préserver les nœuds enfants existants lors d’un ajout. Pour du texte dynamique, créez un élément, définissez son textContent, puis ajoutez cet élément.

Ajouter du contenu avec jQuery

Si un projet utilise déjà jQuery, .append() ajoute du contenu à la fin de chaque élément correspondant. Une chaîne transmise à .append() est analysée comme du HTML : n’y insérez donc pas de chaînes non fiables. Pour du texte brut, créez un nœud DOM et ajoutez-le, ou utilisez l’approche native avec textContent présentée plus haut.

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

if (typeof window !== "undefined" && window.jQuery) {
  const target = jQuery("#myDiv");
  if (target.length) {
    target.append("<p>A new paragraph.</p>");
  }
}

Cet exemple dans un navigateur n’a pas été exécuté selon les éléments fournis. Il nécessite que jQuery soit chargé et qu’un élément correspondant existe ; si l’une de ces conditions n’est pas remplie, le code protégé par la vérification ne fait rien.

Vérifier le résultat et éviter les erreurs courantes

Vérifiez que le sélecteur correspond à l’élément voulu et que le script s’exécute une fois l’élément disponible, par exemple en plaçant le script après le div ou en attendant le chargement du document. getElementById("myDiv") sélectionne un élément par son identifiant ; querySelector("#myDiv") offre une solution équivalente fondée sur un sélecteur. Gérez l’absence de résultat avant d’appeler une méthode sur celui-ci.

Pour du texte brut, privilégiez textContent ou un nœud texte afin que les caractères restent du texte. Pour du balisage, utilisez insertAdjacentHTML("beforeend", html) pour l’insérer à la fin, à l’intérieur de l’élément cible, et assurez-vous que le HTML est fiable ou nettoyé selon une politique adaptée. Ne traitez pas innerHTML += comme une opération d’ajout qui préserve les nœuds. Choisissez l’.append() de jQuery uniquement si le projet inclut déjà jQuery et que le contenu doit être analysé comme du HTML. Ces méthodes servent à ajouter du contenu ; la suppression d’un élément est une opération DOM distincte.