Nœuds DOM jQuery et propriétés des nœuds

Les nœuds DOM peuvent être facilement obtenus via JavaScript pour effectuer une série d'opérations DOM. Mais en fait, la plupart des développeurs ont l'habitude de définir d'abord la structure HTML, mais cela est très rigide.

Imaginez cette situation : si nous pouvons déterminer la structure après avoir obtenu les données via AJAX, cette situation nécessite un traitement dynamique des nœuds

Cet article présente comment utiliser JavaScript. La création d'un élément de nœud div comprend principalement deux parties : créer les attributs de l'élément de nœud div et créer le style de l'élément de nœud div. Je pense que cet article vous aidera certainement à gagner quelque chose.

Création de nœuds

Processus de création :

Ajouter au document

Jetons un coup d'œil à un exemple

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <script>
        $(function(){
            var $li1 = $("<li>php中文网</li>");  //创建第一个li 标签
            var $li2 = $("<li>php.cn</li>");  //创建第二个li 标签

            $("ul").append($li1);  //添加到<ul>节点中，<ul>节点是<li>的父节点
        })
    </script>
</head>
<body>
    <ul></ul>

</body>
</html>

Comme le code ci-dessus. , nous avons créé le contenu du texte dans les deux étiquettes de nœuds que nous appelons généralement des nœuds de texte

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <script> $(function(){ var $li1 = $("<li>php中文网</li>"); //创建第一个li 标签 var $li2 = $("<li>php.cn</li>"); //创建第二个li 标签 $("ul").append($li1); //添加到<ul>节点中，<ul>节点是<li>的父节点 }) </script> </head> <body> <ul></ul> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Nœuds DOM jQuery et propriétés des nœuds

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]