Bagaimana untuk mengubah suai kandungan html dengan js

JavaScript ialah bahasa pengaturcaraan yang digunakan secara meluas yang boleh digunakan untuk mengubah suai kandungan HTML, menukar gaya CSS, menambah kesan dinamik, memproses input pengguna, dsb. Artikel ini akan menumpukan pada cara menggunakan JavaScript untuk mengubah suai kandungan HTML.

1. Operasi DOM

Dalam DOM (Document Object Model), setiap elemen HTML dianggap sebagai objek. Oleh itu, kami boleh mengakses dan mengubah suai atribut tag HTML melalui JavaScript.

1. Dapatkan elemen

Kita boleh menggunakan kaedah document.getElementById() untuk mendapatkan elemen dengan id yang ditentukan, seperti yang ditunjukkan di bawah:

var myElement = document.getElementById("myId");

Begitu juga Sebagai alternatif, kita juga boleh mendapatkan elemen dengan nama teg yang ditentukan melalui kaedah getElementsByTagName(), seperti yang ditunjukkan di bawah:

var myElements = document.getElementsByTagName("p");

2. Ubah suai kandungan elemen

Selepas mendapatkan elemen, kami Kandungan elemen boleh diubah suai melalui atribut innerHTML. Seperti yang ditunjukkan di bawah:

myElement.innerHTML = "新的内容";

Anda boleh menggunakan atribut innerHTML untuk membuat pengubahsuaian kandungan teks yang mudah Jika anda perlu mengubah suai atribut elemen itu sendiri, seperti id atau kelas, anda perlu menggunakan JavaScript kaedah setAttribute().

3. Mencipta elemen baharu

Kita boleh menggunakan kaedah document.createElement() untuk mencipta elemen HTML baharu seperti berikut:

var newElement = document.createElement("p");

Kod di atas mencipta teg p baharu, tetapi teg ini belum lagi ditambahkan pada halaman web. Kita perlu menambah elemen melalui kaedah appendChild().

4. Sisipkan elemen

Kita boleh menggunakan kaedah appendChild() untuk memasukkan elemen yang baru dibuat ke dalam elemen HTML yang ditentukan, atau kita boleh menggunakan kaedah insertBefore() untuk masukkan elemen ke lokasi yang ditetapkan. Seperti yang ditunjukkan di bawah:

document.body.appendChild(newElement);   //将newElement添加到body元素中
document.body.insertBefore(newElement, nextSibling);   //将newElement插入到nextSibling元素之前

2. Operasi perpustakaan jQuery

Selain operasi DOM, kami juga boleh menggunakan perpustakaan jQuery untuk mengubah suai kandungan HTML. Pustaka jQuery ialah perpustakaan yang direka khusus untuk memudahkan JavaScript, menggunakannya untuk mengendalikan elemen HTML dengan lebih pantas dan lebih mudah.

1. Dapatkan elemen

Kita boleh mendapatkan elemen HTML yang ditentukan melalui pemilih jQuery, seperti yang ditunjukkan di bawah:

var myElement = $("#myId");

2. Ubah suai kandungan Elemen

Sama seperti operasi DOM, kami juga boleh mengubah suai kandungan elemen melalui kaedah html(), seperti yang ditunjukkan di bawah:

myElement.html("新的内容");

3. Buat elemen baharu

Kita boleh menggunakan kaedah $() untuk mencipta elemen HTML baharu seperti berikut:

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

4. Insert element

Begitu juga , kita boleh menggunakan kaedah append() dan before() untuk memasukkan elemen yang baru dibuat ke dalam elemen HTML yang ditentukan, seperti yang ditunjukkan di bawah:

$("body").append(newElement);   //将newElement添加到body元素中
myElement.before(newElement);   //将newElement插入到myElement之前

3 Ringkasan

Artikel ini terutamanya memperkenalkan Cara JavaScript beroperasi pada kandungan HTML. Melalui pengenalan artikel ini, pembaca boleh menguasai kandungan berikut:

• Fahami operasi DOM (Document Object Model), menguasai kaedah mendapatkan, mengubah suai, mencipta dan memasukkan elemen
• Fahami Operasi perpustakaan jQuery, gunakan kaedah seperti pemilih, html(), $(), append() dan before() untuk mengendalikan elemen HTML
• Kuasai pengetahuan asas JavaScript untuk mengendalikan HTML, meletakkan asas untuk pembangunan dan amalan seterusnya.

Akhir sekali, pembaca perlu lebih berlatih Hanya melalui amalan peribadi mereka boleh menguasai kaedah pengendalian HTML dengan JavaScript.

Atas ialah kandungan terperinci Bagaimana untuk mengubah suai kandungan html dengan js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!