Maison >interface Web >js tutoriel >Comment ajouter du HTML aux éléments du conteneur sans utiliser InnerHTML ?

Comment ajouter du HTML aux éléments du conteneur sans utiliser InnerHTML ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-10-23 12:16:02928parcourir

How to Append HTML to Container Elements Without Using InnerHTML?

Ajouter du HTML à des éléments de conteneur sans InnerHTML

Lorsque vous essayez d'ajouter du HTML à un élément de conteneur, l'utilisation de innerHTML peut ne pas être idéale en raison de son tendance à remplacer le contenu existant. Pour éviter ce problème, envisagez d'utiliser la méthode insertAdjacentHTML().

insertAdjacentHTML() offre un meilleur contrôle sur le placement du nouveau code HTML. Il prend deux paramètres :

  • Position : Indique où la chaîne doit être ajoutée, avec des options pour "beforebegin", "afterbegin", "beforeend" ou "afterend". Dans ce cas, vous utiliserez "beforeend" pour ajouter à la fin de l'élément conteneur.
  • Chaîne HTML : Le contenu HTML qui doit être ajouté.

Exemple d'utilisation :

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');

Cette méthode vous permet d'ajouter du code HTML sans créer de balise span supplémentaire ni remplacer le contenu existant, offrant ainsi une solution plus efficace et cohérente.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn