Bagaimana untuk menambah tag dalam jquery

jQuery ialah perpustakaan JavaScript yang digunakan secara meluas yang memudahkan untuk memanipulasi elemen HTML dan Model Objek Dokumen (DOM). Dalam aplikasi web, selalunya perlu menambah elemen label baharu pada halaman. Dalam artikel ini, kita akan membincangkan cara menambah tag menggunakan jQuery.

Tambah elemen pada DOM

Dalam jQuery, tambahkan teg pada DOM dengan mencipta elemen baharu. Anda boleh menggunakan kaedah jQuery untuk mencipta elemen baharu yang mengandungi elemen yang dikehendaki. Sebagai contoh, kod berikut mencipta elemen div baharu:

var newDiv = $("<div></div>");

Pada ketika ini, elemen baharu hanya wujud dalam ingatan dan tidak ditambahkan pada halaman, jadi ia perlu ditambahkan pada DOM. Elemen boleh ditambah pada elemen induk tertentu menggunakan fungsi appendTo(). Sebagai contoh, kod berikut menambah elemen div baharu pada elemen dengan id induk:

var newDiv = $("<div></div>");
$("#parent").append(newDiv);

Ambil perhatian bahawa pemilih dalam jQuery menggunakan sintaks pemilih CSS, menggunakan $("#id") untuk memilih atribut id sesuatu elemen.

Tambah Teg

Untuk mencipta elemen teg baharu, anda boleh menggunakan kaedah $(""). Antaranya, tagname ialah nama tag yang perlu anda tambah. Contohnya, kod berikut mencipta teg p baharu:

var newP = $("<p></p>");

Anda boleh menggunakan fungsi attr() untuk menetapkan atribut teg. Contohnya, kod berikut menetapkan atribut kelasnya kepada "kelas saya" selepas mencipta teg p baharu:

var newP = $("<p></p>").attr("class", "my-class");

Teg p pada masa ini belum lagi ditambahkan pada halaman dan anda juga perlu menggunakan fungsi appendTo () menambahkannya pada elemen tertentu. Contohnya, kod berikut menambah teg p baharu pada elemen dengan id induk:

var newP = $("<p></p>").attr("class", "my-class");
$("#parent").append(newP);

Anda boleh menggunakan fungsi text() untuk menetapkan kandungan teks semasa membuat teg baharu. Sebagai contoh, kod berikut mencipta teg p yang mengandungi kandungan teks:

var newP = $("<p></p>").text("这是一段新的文本内容");

Setelah teg ditambahkan pada elemen induk, ia boleh digayakan menggunakan gaya CSS. Sebagai contoh, kod berikut menetapkan tag p yang baru ditambahkan kepada merah:

var newP = $("<p></p>").text("这是一段新的文本内容").css("color", "red");
$("#parent").append(newP);

Selain menggunakan fungsi appendTo() untuk menambah elemen baharu pada elemen induk, anda juga boleh menggunakan fungsi lain, seperti fungsi prependTo() Tambah elemen baharu sebagai anak pertama elemen induk. Anda juga boleh menggunakan fungsi before() untuk menambah elemen baharu sebelum elemen tertentu, dan fungsi after() untuk menambah elemen baharu selepas elemen tertentu.

Ringkasan

Dalam artikel ini, kami membincangkan cara menambah tag menggunakan jQuery. Kita boleh menambah elemen label baharu dengan mudah dengan mencipta elemen baharu dan menambahkannya pada DOM. Pada masa yang sama, kita juga boleh menggunakan fungsi attr() untuk menetapkan atribut label, menggunakan fungsi text() untuk menetapkan kandungan teks dan menggunakan gaya CSS untuk menggayakan elemen label. Akhir sekali, beberapa kod sampel disediakan supaya pelajar boleh berlatih lebih banyak berdasarkan situasi sebenar.

Atas ialah kandungan terperinci Bagaimana untuk menambah tag dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!