Comparaison des méthodes pour ajouter et insérer avec JavaScript

La mise à jour dynamique des pages Web après la charge initiale nécessite souvent des méthodes de JavaScript, appendchild, insertadjacenthtml ou innerhtml. Le choix de la bonne méthode dépend de plusieurs facteurs, notamment le type de contenu ajouté et la compatibilité du navigateur.

Comprendre le dom

Les sites Web sont essentiellement des fichiers HTML rendus par les navigateurs dans une arborescence de modèle d'objet de document (DOM). Cet arbre se compose d'objets imbriqués représentant des éléments HTML (nœuds). Des termes comme «nœud», «élément» et «objet» sont souvent utilisés de manière interchangeable, «l'objet» étant l'élément le plus général et le plus «HTML» le plus spécifique. Comprendre cette hiérarchie est crucial pour manipuler le DOM avec JavaScript.

Méthodes d'appel d'appel et d'insertion

La plupart des méthodes d'ajout / insert suivent ce modèle: Element.method(content) . Pour cibler un élément, utilisez des méthodes comme document.querySelector() , document.getElementById() ou document.getElementsByClassName() . N'oubliez pas que getElementsByClassName() renvoie un tableau.

Types de contenu et compatibilité des méthodes

Le choix de la méthode dépend fortement du type de contenu:

• NODES: créé à l'aide document.createElement() ou sélectionné dans le dom. appendChild ET append LE TRAVAILLER AVEC LES NODES.
• Texte brut: chaînes de texte simples. La plupart des méthodes prennent en charge le texte brut.
• HTML: chaînes HTML. insertAdjacentHTML et innerHTML gère directement HTML.

Voici un résumé de la compatibilité des méthodes:

Méthode	Nœuds	Texte brut	Html	Internet Explorer	Problèmes de sécurité
append	Oui	Oui	Non	Non	Faible
appendChild	Oui	Non	Non	Oui	Faible
insertAdjacentHTML	Non	Oui	Oui	Oui	Haute (entrée non animée)
innerHTML	Non	Oui	Oui	Oui	High (perte d'événements d'événements)

Choisir la bonne méthode

• HTML existant: les méthodes supportant le HTML (par exemple, insertAdjacentHTML ) sont les plus faciles.
• Nouveau HTML dans JavaScript: la création de nœuds pour HTML complexe peut être lourde; Les cordes HTML sont plus concises.
• Écouteurs d'événements: utilisez des nœuds ( appendChild , append ) pour la pièce jointe de l'événement d'événements immédiats.
• Texte brut uniquement: Toute méthode prenant en charge le texte brut fonctionne.
• HTML non fiable: désinfecter le HTML soumis à l'utilisateur avant d'utiliser insertAdjacentHTML ou innerHTML .
• Compatibilité des explorateurs Internet: évitez append si le support IE est nécessaire.

Exemple: ajoutant sur une liste d'amis

Ajoutons un nouvel utilisateur, "Dale", sur une liste de copains en utilisant différentes méthodes. Supposer que la liste a<ul id="buddies"></ul> avec <li><a>...</a></li> des articles.

append

 const newbuddy = document.createElement ('li');
const newlink = document.createElement ('a');
NewLink.Apend ("Dale");
NewBuddy.Apend (NewLink);
Document.QuerySelector ('# Buddies'). APPEND (NewBuddy);

appendChild

 const newbuddy = document.createElement ('li');
const newlink = document.createElement ('a');
newLink.TextContent = "Dale";
NewBuddy.ApendChild (NewLink);
document.QuerySelector ('# Buddies'). APPENDCHILD (NewBuddy);

insertAdjacentHTML

 Document.QuerySelector ('# Buddies'). INSERTADJACENTHTML ('AVANT', '

Vallée

');

innerHTML (non recommandé pour l'appel)

 document.QuerySelector ('# Buddies'). InnerHtml = '

Vallée

';; // Évitez cela!

innerHTML est problématique car il remplace l'ensemble du HTML intérieur, supprimant potentiellement les auditeurs d'événements.

Démo et récapituler

Une démonstration complète présentant toutes les méthodes serait bénéfique ici (code omis pour la concision). En résumé:

• Évitez innerHTML pour l'appel d'appel en raison de la perte d'écoute d'événements.
• append offre de la flexibilité et est efficace pour les cas simples mais manque de prise en charge IE.
• appendChild est largement compatible et adapté à la manipulation des nœuds.
• insertAdjacentHTML fournit un placement précis et gère efficacement les chaînes HTML, mais nécessite une désinfection soigneuse des entrées utilisateur.

Une exploration plus approfondie de l' before , after , insertBefore et insertAdjacentElement est encouragée pour une manipulation DOM plus avancée.

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!