Cara menggunakan jQuery untuk mengubah suai dan membaca HTML elemen

Inner HTML ialah atribut yang digunakan untuk mengakses dan mengubah suai kandungan HTML sesuatu elemen. Sejak beberapa tahun kebelakangan ini, jQuery telah menjadi salah satu alat yang paling popular untuk melaksanakan templat dalaman dalam JS. Dalam artikel ini, kami akan membincangkan cara menggunakan jQuery untuk mengubah suai dan membaca HTML elemen.

Sintaks templat dalaman jQuery (HTML Dalaman)

Secara konsep, templat dalaman (HTML Dalaman) melibatkan operasi DOM (Model Objek Dokumen). Ia beroperasi pada elemen dengan mengubah suai DOM. Berikut ialah sintaks jQuery asas untuk mengubah suai HTML:

$(selector).html(content)

Dalam sintaks di atas, pemilih menunjuk kepada elemen yang perlu diubah suai. Kandungan HTML diwakili oleh pembolehubah kandungan. Kandungan boleh berupa teks ringkas atau kod HTML. Jika kandungan yang dihantar adalah fungsi, nilai pulangan fungsi tersebut akan menjadi kandungan HTML.

Mari kita lihat penggunaan templat dalaman jQuery (Inner HTML) melalui beberapa contoh.

Contoh 1:

Dalam contoh berikut, kami memilih elemen bertanda "kandungan" dan menetapkan kandungan HTML baharunya kepada "

Selamat Datang ke Tapak Web Saya!< /h1> ":

$("#content").html("

Selamat Datang ke Tapak Web Saya!

");

Contoh 2:

Dalam contoh berikut, kami menggunakan fungsi JavaScript untuk mengira kandungan HTML yang ditandakan sebagai kandungan secara dinamik:

$("#content").html(function(){
return "Tarikh hari ini ialah: " + Date();
});

Baca kandungan elemen (Inner HTML)

Selain menetapkan kandungan elemen, anda juga boleh menggunakan jQuery untuk baca elemen Kandungan (Inner HTML). Berikut ialah sintaks jQuery asas untuk membaca kandungan HTML elemen:

$(selector).html()

Dalam sintaks ini, pemilih menunjuk kepada elemen yang perlu membaca. Nilai pulangan ialah kandungan HTML elemen. Seterusnya, mari kita lihat contoh.

Contoh 3:

Dalam contoh berikut, kami mengulangi semua item senarai yang ditandakan sebagai "senarai" dan mengeluarkan HTML setiap item ke konsol:

$ ( "#list li").setiap(fungsi(){
console.log($(this).html());
});

Ringkasan

Melalui artikel ini, kami telah mempelajari cara menggunakan tag HTML Dalaman jQuery untuk membaca dan mengubah suai kandungan HTML sesuatu elemen. Kami juga melihat cara menggunakan fungsi untuk mengira kandungan unsur secara dinamik. Kami berharap artikel ini membantu anda lebih memahami templat dalaman jQuery dan mempelajari cara menggunakannya untuk memproses HTML.

Atas ialah kandungan terperinci Cara menggunakan jQuery untuk mengubah suai dan membaca HTML elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!