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

et les ajouter à l'arborescence des nœuds DOM en tant que nœuds enfants du nœud d'élément

La réalisation de cette tâche nécessite deux étapes.

1. Créez deux nouveaux éléments

• 
  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

• , 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

  , vous pouvez utiliser $("

  ") ou $("

  "), mais n'utilisez pas $("< ;p>") Ou $ majuscule("

  ").

  Créer un nœud de texte

  Deux nœuds d'éléments

• 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 $("

• Ceci estacombinaison complexe" );

  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

• 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.