Maison >interface Web >js tutoriel >Comment puis-je créer des éléments DOM à partir de chaînes HTML sans jQuery ?
Comment puis-je créer des éléments DOM à partir de chaînes HTML sans jQuery ?
- DDDoriginal
- 2024-12-24 09:20:25724parcourir
Création d'éléments DOM à partir de chaînes HTML
Bien que jQuery offre un mécanisme pratique pour créer des éléments DOM à partir de chaînes HTML, cette fonctionnalité peut également être obtenue en utilisant les méthodes DOM intégrées ou via la bibliothèque Prototype.
DOM Méthodes
Pour les navigateurs plus anciens, ainsi que pour node/jsdom (qui au moment de la rédaction ne prenait pas en charge les éléments HTML ), la méthode suivante peut être utilisée :
function createElementFromHTML(htmlString) {
var div = document.createElement('div');
div.innerHTML = htmlString.trim();
// Change this to div.childNodes to support multiple top-level nodes.
return div.firstChild;
}
Il est important de noter que cette méthode ne fonctionnera pas pour certains éléments qui ne peuvent pas être légalement des enfants d'un
Bibliothèque de prototypes
Alternativement, la bibliothèque Prototype fournit une méthode intégrée pour créer des éléments à partir de chaînes HTML via sa méthode update(). Voici un exemple :
var element = $(document.createElement('li')).update('<li>text</li>');
Cas d'utilisation
Les méthodes DOM intégrées et la bibliothèque Prototype offrent des moyens fiables de créer des éléments DOM à partir de chaînes HTML, en particulier pour navigateurs plus anciens ou dans des scénarios où jQuery n’est pas utilisé. Ces méthodes fournissent une approche flexible et robuste pour générer dynamiquement du contenu DOM basé sur le balisage HTML.
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!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript