Kaedah JQuery untuk mencipta DOM nodes_jquery

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

Gunakan pemilih JQuery untuk mencari nod elemen tertentu dengan cepat dan mudah dalam dokumen, kemudian gunakan kaedah attr() untuk mendapatkan nilai pelbagai atribut elemen. Tetapi manipulasi DOM sebenar tidak semudah itu. Dalam operasi DOM, selalunya perlu mencipta kandungan HTML secara dinamik untuk menukar pembentangan dokumen dalam penyemak imbas dan mencapai pelbagai tujuan interaksi manusia-komputer.

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>

Buat nod elemen

Sebagai contoh, anda ingin mencipta dua 25edfb22a4f469ecb59f1190150159c6 nod elemen dan menambahkannya pada pokok nod DOM sebagai nod anak bagi nod elemen ff6d136ddc5fdfeffaf53ff6ee95f185 Untuk menyelesaikan tugasan ini memerlukan dua langkah.

1. Cipta dua 25edfb22a4f469ecb59f1190150159c6
2. Masukkan dua elemen baharu ke dalam dokumen.

Langkah pertama boleh diselesaikan menggunakan fungsi kilang jQuery $(), dalam format berikut:

$(html);

Kaedah

$(html) akan mencipta objek DOM berdasarkan rentetan penanda HTML masuk, membungkus objek DOM ke dalam objek jQuery dan mengembalikannya.

Mula-mula buat dua elemen 25edfb22a4f469ecb59f1190150159c6, kod jQuery adalah seperti berikut:

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

Kemudian masukkan dua elemen baharu ini ke dalam dokumen, anda boleh menggunakan kaedah seperti append() dalam jQuery. Kod JQuery adalah seperti berikut:

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

Nod elemen baharu yang dibuat secara dinamik tidak akan ditambahkan secara automatik pada dokumen, tetapi perlu dimasukkan ke dalam dokumen menggunakan kaedah lain. Apabila mencipta elemen individu, berhati-hati tentang menutup teg dan menggunakan pemformatan XHTML standard. Contohnya, untuk mencipta elemen e388a4556c0f65e1904146cc1a846bee anda boleh menggunakan $("a6f776b766579c28d02706af09482172") atau $("e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3"), tetapi jangan gunakan $("d75b50d79fd2256cec321824de8f670f") Atau huruf besar $("4ba45e75bc6a82723461547597599043").

Buat nod teks

Dua 25edfb22a4f469ecb59f1190150159c6 nod elemen telah dibuat dan dimasukkan ke dalam dokumen. Pada masa ini, anda perlu menambah kandungan teks pada nod elemen yang dibuat.

Kod JQuery adalah seperti berikut:

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

Seperti yang ditunjukkan dalam kod di atas, mencipta nod teks adalah untuk menulis kandungan teks secara langsung semasa mencipta nod elemen, dan kemudian menggunakan append() dan kaedah lain untuk menambahkannya pada dokumen.

Tidak kira betapa rumitnya kod HTML dalam $(html), ia mesti dibuat dengan cara yang sama. Contohnya $("25edfb22a4f469ecb59f1190150159c6907fae80ddef53131f3292ee4f81644bIni ialahd1c6776b927dc33c5d9114750b586338a4b561c25d9afb9ac8dc4d70affff419a0d36329ec37a2cc24d42c7229b69747aee7959cc8dd4be16ef633321c03dac32gabungan kompleks5db79b134e9f6b82c0b36e0489ee08ed2867e861ba23559b572f230426ab14ea" );

Buat nod atribut

Mencipta nod atribut adalah serupa dengan mencipta nod teks, dan juga dibuat secara langsung semasa mencipta nod elemen. Kod JQuery adalah seperti berikut:

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

Lihat kod melalui alat kod sumber penyemak imbas, dan anda boleh melihat bahawa dua elemen 25edfb22a4f469ecb59f1190150159c6 mempunyai nod atribut bernama "tajuk". Ia boleh dinilai daripada ini bahawa nod teks dan nod atribut elemen yang dicipta telah ditambahkan ke halaman web. Ia boleh dilihat bahawa menggunakan jQuery untuk mencipta elemen HTML secara dinamik adalah sangat mudah, mudah dan fleksibel.

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.