Méthode JQuery d'insertion de DOM nodes_jquery

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

La création dynamique d'éléments HTML n'est d'aucune utilité pratique, car les éléments nouvellement créés doivent être insérés dans le document. Le moyen le plus simple d'insérer un nœud nouvellement créé dans un document consiste à en faire le nœud enfant d'un nœud du document. Auparavant, nous utilisions une méthode append() pour insérer des nœuds, qui ajouteraient le contenu nouvellement créé à l'intérieur de l'élément.

Il n'y a pas qu'une seule façon d'insérer un nœud nouvellement créé dans un document. JQuery propose également d'autres façons d'insérer des nœuds, comme indiqué dans le tableau ci-dessous. Les lecteurs peuvent faire de manière flexible une variété de choix en fonction de leurs besoins réels.

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>

append()

Ajouter du contenu à l'intérieur de chaque élément correspondant :

Code HTML :

Copier le code Le code est le suivant :

e388a4556c0f65e1904146cc1a846beeJe veux dire :94b3e26ee717c64999d7867364b1b4a3

Code jQuery :

Copier le code Le code est le suivant :

$("p").append("a4b561c25d9afb9ac8dc4d70affff419Bonjour< ; /b>");

Résultat :

Copier le code Le code est le suivant :

e388a4556c0f65e1904146cc1a846beeJe veux dire : a4b561c25d9afb9ac8dc4d70affff419Bonjour< /b> ;94b3e26ee717c64999d7867364b1b4a3

appendTo()

Ajouter tous les éléments correspondants à l'élément spécifié. En fait, l'utilisation de cette méthode inverse l'opération $(A).append(B) normale, c'est-à-dire qu'au lieu d'ajouter B à A, on ajoute A à B :

Code HTML :

Copier le code Le code est le suivant :

e388a4556c0f65e1904146cc1a846beeJe veux dire :94b3e26ee717c64999d7867364b1b4a3

Code jQuer :

Copier le code Le code est le suivant :

$("a4b561c25d9afb9ac8dc4d70affff419Bonjour0d36329ec37a2cc24d42c7229b69747a"). appendTo ("p");

Résultat :

Copier le code Le code est le suivant :

e388a4556c0f65e1904146cc1a846beeJe veux dire : a4b561c25d9afb9ac8dc4d70affff419Bonjour< /b> ;94b3e26ee717c64999d7867364b1b4a3

prepend()

Ajoutez le contenu à l'intérieur de chaque élément correspondant :

Code HTML :

Copier le code Le code est le suivant :

e388a4556c0f65e1904146cc1a846beeJe veux dire :94b3e26ee717c64999d7867364b1b4a3

Code jQuer :

Copier le code Le code est le suivant :

$("p").prepend<"a4b561c25d9afb9ac8dc4d70affff419Bonjour< ; /b>");

Résultat :

Copier le code Le code est le suivant :

e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419Bonjour0d36329ec37a2cc24d42c7229b69747a Pour dire：94b3e26ee717c64999d7867364b1b4a3

prependTo()

Ajoutez tous les éléments correspondants à l'élément spécifié. En fait, l'utilisation de cette méthode inverse l'opération $(A).prepend(B) normale, c'est-à-dire qu'au lieu d'ajouter B à A, A est ajouté à B :

Code HTML :

Copier le code Le code est le suivant :

e388a4556c0f65e1904146cc1a846beeJe veux dire :94b3e26ee717c64999d7867364b1b4a3

Code jQuer :

Copier le code Le code est le suivant :

$("a4b561c25d9afb9ac8dc4d70affff419Bonjour0d36329ec37a2cc24d42c7229b69747a"). prependTo ("p");

Résultat :

Copier le code Le code est le suivant :

e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419Bonjour0d36329ec37a2cc24d42c7229b69747a Pour dire：94b3e26ee717c64999d7867364b1b4a3

après()

Insérer du contenu après chaque élément correspondant :

Code HTML :

Copier le code Le code est le suivant :

e388a4556c0f65e1904146cc1a846beeJe veux dire :94b3e26ee717c64999d7867364b1b4a3

Code jQuer :

Copier le code Le code est le suivant :

$("p").after("a4b561c25d9afb9ac8dc4d70affff419Bonjour< ; /b>");

Résultat :

Copier le code Le code est le suivant :

e388a4556c0f65e1904146cc1a846beeJe veux dire :94b3e26ee717c64999d7867364b1b4a3< ;b>Tu es bon0d36329ec37a2cc24d42c7229b69747a

insertAfler()

Insérez tous les éléments correspondants après l'élément spécifié. En fait, l'utilisation de cette méthode inverse l'opération $(A).after(B) normale, c'est-à-dire qu'au lieu d'insérer B après A, A est inséré après B :

Code HTML :

Copier le code Le code est le suivant :

e388a4556c0f65e1904146cc1a846beeJe veux dire :94b3e26ee717c64999d7867364b1b4a3

Code jQuer :

Copier le code Le code est le suivant :

$("a4b561c25d9afb9ac8dc4d70affff419Bonjour0d36329ec37a2cc24d42c7229b69747a"). insertAfter ("p");

Résultat :

Copier le code Le code est le suivant :

e388a4556c0f65e1904146cc1a846beeJe veux dire :94b3e26ee717c64999d7867364b1b4a3< ;b>Tu es bon0d36329ec37a2cc24d42c7229b69747a

avant()

Insérer du contenu avant chaque élément correspondant :

Code HTML :

Copier le code Le code est le suivant :

e388a4556c0f65e1904146cc1a846beeJe veux dire :94b3e26ee717c64999d7867364b1b4a3

Code jQuer :

Copier le code Le code est le suivant :

$("p").before("a4b561c25d9afb9ac8dc4d70affff419Bonjour< ; /b>");

Résultat :

Copier le code Le code est le suivant :

a4b561c25d9afb9ac8dc4d70affff419Bonjour0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beeJe veux Pour dire：94b3e26ee717c64999d7867364b1b4a3

insertBefore()

Poussez tous les éléments correspondants devant l'élément spécifié. En fait, l'utilisation de cette méthode inverse l'opération $(A).before(B) normale, c'est-à-dire qu'au lieu d'insérer B avant A, insérez A avant B :

Code HTML :

Copier le code Le code est le suivant :

e388a4556c0f65e1904146cc1a846beeJe veux dire :94b3e26ee717c64999d7867364b1b4a3

Code jQuer :

Copier le code Le code est le suivant :

$("a4b561c25d9afb9ac8dc4d70affff419Bonjour0d36329ec37a2cc24d42c7229b69747a"). insertAvant ("p");

Résultat :

Copier le code Le code est le suivant :

a4b561c25d9afb9ac8dc4d70affff419Bonjour0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beeJe veux Pour dire：94b3e26ee717c64999d7867364b1b4a3

这些插入节点的方法不仅能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动。例如利用它们创建新元素并对其进行插入操作：

$(function(){
  var $li_1 = $("<li title='新增节点：数据结构'>新增节点：数据结构</li>"); // 创建第一个<li>元素
  var $li_2 = $("<li title='新增节点：设计模式'>新增节点：设计模式</li>"); // 创建第二个<li>元素
  var $li_3 = $("<li title='新增节点：计算机算法'>新增节点：计算机算法</li>"); // 创建第三个<li>元素
  var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
  var $two_li = $(".nm_ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点
  $("#btn_1").click(function(){
    $parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
  });
  $("#btn_2").click(function(){
    // 可以采取链式写法：$parent.append($li_1).append($li_2);
    $parent.append($li_2);   
  });
  $("#btn_3").click(function(){
    // insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后
    $li_3.insertAfter($two_li); 
  });
});

也利用它们对原有的DOM元素进行移动：

$(function(){
  var $one_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点
  var $two_li = $("ul li:eq(2)"); // 获取<ul>节点中第三个<li>元素节点
  $two_li.insertBefore($one_li); //移动节点
});

希望本文所述对大家的jQuery程序设计有所帮助。