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
Libérer: 2024-10-23 12:16:02
original
932 Les gens l'ont consulté

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>');
Copier après la connexion

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!

source:php
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal