Méthode JQuery de création de DOM nodes_jquery

L'exemple de cet article décrit comment JQuery crée des nœuds DOM. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Utilisez le sélecteur JQuery pour trouver rapidement et facilement un nœud d'élément spécifique dans le document, puis utilisez la méthode attr() pour obtenir les valeurs des différents attributs de l'élément. Mais la véritable manipulation du DOM n’est pas si simple. Dans les opérations DOM, il est souvent nécessaire de créer dynamiquement du contenu HTML pour modifier la présentation des documents dans le navigateur et atteindre divers objectifs d'interaction homme-machine.

La structure HTML DOM est la suivante :

<p class="nm_p" title="欢迎访问脚本之家" >欢迎访问脚本之家</p>
<ul class="nm_ul">
    <li title='PHP编程'>简单易懂的PHP编程</li>
    <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
    <li title='JQuery编程'>简单易懂的JQuery编程</li>
</ul>

Créer un nœud d'élément

Par exemple, vous souhaitez créer deux nœuds d'élément 25edfb22a4f469ecb59f1190150159c6 et les ajouter à l'arborescence des nœuds DOM en tant que nœuds enfants du nœud d'élément ff6d136ddc5fdfeffaf53ff6ee95f185 La réalisation de cette tâche nécessite deux étapes.

1. Créez deux nouveaux éléments 25edfb22a4f469ecb59f1190150159c6
2. Insérez les deux nouveaux éléments dans le document.

La première étape peut être complétée à l’aide de la fonction factory $() de jQuery, au format suivant :

$(html);

La méthode

$(html) créera un objet DOM basé sur la chaîne de balisage HTML entrant, encapsulera l'objet DOM dans un objet jQuery et le renverra.

Créez d'abord deux éléments 25edfb22a4f469ecb59f1190150159c6, le code jQuery est le suivant :

var $li_1 = $("<li></li>"); // 创建第一个<li>元素
var $li_2 = $("<li></li>"); // 创建第二个<li>元素

Insérez ensuite ces deux nouveaux éléments dans le document, vous pouvez utiliser des méthodes telles que append() dans jQuery. Le code JQuery est le suivant :

var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

Les nouveaux nœuds d'éléments créés dynamiquement ne seront pas automatiquement ajoutés au document, mais devront être insérés dans le document à l'aide d'autres méthodes. Lors de la création d'éléments individuels, veillez à fermer les balises et à utiliser le formatage XHTML standard. Par exemple, pour créer un élément e388a4556c0f65e1904146cc1a846bee, vous pouvez utiliser $("a6f776b766579c28d02706af09482172") ou $("e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3"), mais n'utilisez pas $("< ;p>") Ou $ majuscule("4ba45e75bc6a82723461547597599043").

Créer un nœud de texte

Deux nœuds d'éléments 25edfb22a4f469ecb59f1190150159c6 ont été créés et insérés dans le document. À ce stade, vous devez ajouter du contenu textuel au nœud d'élément créé.

Le code JQuery est le suivant :

var $li_1 = $("
新增节点：数据结构
"); // 创建第一个
元素
var $li_2 = $("
新增节点：设计模式
"); // 创建第二个
元素
var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

Comme le montre le code ci-dessus, la création de nœuds de texte consiste à écrire le contenu du texte directement lors de la création des nœuds d'élément, puis à utiliser append() et d'autres méthodes pour les ajouter au document.

Peu importe la complexité du code HTML dans $(html), il doit être créé de la même manière. Par exemple $("25edfb22a4f469ecb59f1190150159c6907fae80ddef53131f3292ee4f81644bCeci estd1c6776b927dc33c5d9114750b586338a4b561c25d9afb9ac8dc4d70affff419a0d36329ec37a2cc24d42c7229b69747aee7959cc8dd4be16ef633321c03dac32combinaison complexe5db79b134e9f6b82c0b36e0489ee08ed2867e861ba23559b572f230426ab14ea" );

Créer un nœud d'attribut

La création de nœuds d'attribut est similaire à la création de nœuds de texte et est également créée directement lors de la création de nœuds d'élément. Le code JQuery est le suivant :

var $li_1 = $("<li title='新增节点：数据结构'>新增节点：数据结构</li>"); // 创建第一个<li>元素
var $li_2 = $("<li title='新增节点：设计模式'>新增节点：设计模式</li>"); // 创建第二个<li>元素
var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

Affichez le code via l'outil de code source du navigateur et vous pouvez voir que les deux derniers éléments 25edfb22a4f469ecb59f1190150159c6 ont un nœud d'attribut nommé "title". On peut en juger que les nœuds de texte et les nœuds d'attribut de l'élément créé ont été ajoutés à la page Web. On peut voir que l'utilisation de jQuery pour créer dynamiquement des éléments HTML est très simple, pratique et flexible.

J'espère que cet article sera utile à la programmation jQuery de chacun.