Kaedah JQuery untuk memasukkan DOM nodes_jquery

Contoh dalam artikel ini menerangkan kaedah memasukkan nod DOM dengan JQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Mencipta elemen HTML secara dinamik tidak berguna kerana elemen yang baru dicipta perlu dimasukkan ke dalam dokumen. Cara paling mudah untuk memasukkan nod yang baru dibuat ke dalam dokumen ialah menjadikannya sebagai nod anak nod dalam dokumen. Sebelum ini kami menggunakan kaedah append() untuk memasukkan nod, yang akan menambahkan kandungan yang baru dibuat di dalam elemen.

Bukan hanya satu cara untuk memasukkan nod yang baru dibuat ke dalam dokumen JQuery juga menyediakan cara lain untuk memasukkan nod, seperti yang ditunjukkan dalam jadual di bawah. Pembaca secara fleksibel boleh membuat pelbagai pilihan berdasarkan keperluan sebenar.

Struktur DOM HTML adalah seperti berikut:

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

tambah()

Tambahkan kandungan di dalam setiap elemen padanan:

Kod HTML:

Salin kod Kodnya adalah seperti berikut:

e388a4556c0f65e1904146cc1a846beeSaya ingin katakan:94b3e26ee717c64999d7867364b1b4a3

Kod jQuery:

Salin kod Kod adalah seperti berikut:

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

Keputusan:

Salin kod Kod adalah seperti berikut:

e388a4556c0f65e1904146cc1a846beeSaya ingin mengucapkan: a4b561c25d9afb9ac8dc4d70affff419Hello< /b> ;94b3e26ee717c64999d7867364b1b4a3

tambahkepada()

Tambahkan semua elemen padanan pada elemen yang ditentukan. Malah, menggunakan kaedah ini membalikkan operasi $(A).append(B) biasa, iaitu, bukannya menambahkan B ke A, menambahkan A ke B:

Kod HTML:

Salin kod Kodnya adalah seperti berikut:

e388a4556c0f65e1904146cc1a846beeSaya ingin katakan:94b3e26ee717c64999d7867364b1b4a3

Kod jQuer:

Salin kod Kod adalah seperti berikut:

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

Keputusan:

Salin kod Kod adalah seperti berikut:

e388a4556c0f65e1904146cc1a846beeSaya ingin mengucapkan: a4b561c25d9afb9ac8dc4d70affff419Hello< /b> ;94b3e26ee717c64999d7867364b1b4a3

prepend()

Tambahkan kandungan dalam setiap elemen padanan:

Kod HTML:

Salin kod Kodnya adalah seperti berikut:

e388a4556c0f65e1904146cc1a846beeSaya ingin katakan:94b3e26ee717c64999d7867364b1b4a3

Kod jQuer:

Salin kod Kod adalah seperti berikut:

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

Keputusan:

Salin kod Kodnya adalah seperti berikut:

e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419Hello0d36329ec37a2cc24d42c7229b69747a untuk mengatakan ：94b3e26ee717c64999d7867364b1b4a3

prependTo()

Tambahkan semua elemen padanan pada elemen yang ditentukan. Malah, menggunakan kaedah ini membalikkan operasi biasa $(A).prepend(B), iaitu, bukannya menambah B kepada A, A ditambah kepada B:

Kod HTML:

Salin kod Kodnya adalah seperti berikut:

e388a4556c0f65e1904146cc1a846beeSaya ingin katakan:94b3e26ee717c64999d7867364b1b4a3

Kod jQuer:

Salin kod Kod adalah seperti berikut:

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

Keputusan:

Salin kod Kodnya adalah seperti berikut:

e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419Hello0d36329ec37a2cc24d42c7229b69747a untuk mengatakan ：94b3e26ee717c64999d7867364b1b4a3

selepas()

Sisipkan kandungan selepas setiap elemen padanan:

Kod HTML:

Salin kod Kodnya adalah seperti berikut:

e388a4556c0f65e1904146cc1a846beeSaya ingin katakan:94b3e26ee717c64999d7867364b1b4a3

Kod jQuer:

Salin kod Kod adalah seperti berikut:

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

Keputusan:

Salin kod Kodnya adalah seperti berikut:

e388a4556c0f65e1904146cc1a846beeSaya ingin katakan:94b3e26ee717c64999d7867364b1b4a3< ;b>Anda Baik0d36329ec37a2cc24d42c7229b69747a

insertAfler()

Masukkan semua elemen padanan selepas elemen yang ditentukan. Malah, menggunakan kaedah ini membalikkan operasi biasa $(A).selepas(B), iaitu, bukannya memasukkan B selepas A, A dimasukkan selepas B:

Kod HTML:

Salin kod Kodnya adalah seperti berikut:

e388a4556c0f65e1904146cc1a846beeSaya ingin katakan:94b3e26ee717c64999d7867364b1b4a3

Kod jQuer:

Salin kod Kod adalah seperti berikut:

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

Keputusan:

Salin kod Kodnya adalah seperti berikut:

e388a4556c0f65e1904146cc1a846beeSaya ingin katakan:94b3e26ee717c64999d7867364b1b4a3< ;b>Anda Baik0d36329ec37a2cc24d42c7229b69747a

sebelum()

Sisipkan kandungan sebelum setiap elemen padanan:

Kod HTML:

Salin kod Kodnya adalah seperti berikut:

e388a4556c0f65e1904146cc1a846beeSaya ingin katakan:94b3e26ee717c64999d7867364b1b4a3

Kod jQuer:

Salin kod Kod adalah seperti berikut:

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

Keputusan:

Salin kod Kod adalah seperti berikut:

a4b561c25d9afb9ac8dc4d70affff419Hello0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beeSaya mahu untuk mengatakan ：94b3e26ee717c64999d7867364b1b4a3

masukkanSebelum()

Tolak semua elemen padanan di hadapan elemen yang ditentukan. Malah, menggunakan kaedah ini membalikkan operasi biasa $(A).sebelum(B), iaitu, bukannya memasukkan B sebelum A, masukkan A sebelum B:

Kod HTML:

Salin kod Kodnya adalah seperti berikut:

e388a4556c0f65e1904146cc1a846beeSaya ingin katakan:94b3e26ee717c64999d7867364b1b4a3

Kod jQuer:

Salin kod Kod adalah seperti berikut:

$("a4b561c25d9afb9ac8dc4d70affff419Hello0d36329ec37a2cc24d42c7229b69747a"). insertBefore ("p");

Keputusan:

Salin kod Kod adalah seperti berikut:

a4b561c25d9afb9ac8dc4d70affff419Hello0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beeSaya mahu untuk mengatakan ：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程序设计有所帮助。