Bagaimana untuk mengubah suai html menggunakan javascript

Javascript ialah bahasa skrip berkuasa yang digunakan secara meluas dalam pembangunan web, terutamanya untuk mengubah suai kandungan dalam dokumen HTML. Artikel ini akan memperkenalkan cara menggunakan Javascript untuk mengubah suai HTML.

1. Dapatkan elemen HTML

Sebelum menggunakan Javascript untuk mengubah suai HTML, anda perlu terlebih dahulu mendapatkan elemen HTML untuk diubah suai. Kita boleh menggunakan kaedah getElementById(), kaedah getElementsByClassName(), kaedah getElementsByTagName() dan kaedah lain objek dokumen untuk mendapatkan elemen HTML.

Sebagai contoh, jika anda ingin mendapatkan elemen div dengan ID "kandungan":

var content = document.getElementById("content");

2. Ubah suai kandungan elemen HTML

Dengan merujuk kepada elemen HTML , kami boleh menggunakan Javascript untuk mengubah suai kandungan HTML. JavaScript menyediakan pelbagai kaedah untuk mengubah suai kandungan elemen HTML. Berikut ialah beberapa kaedah biasa:

1. atribut innerHTML

Atribut innerHTML boleh mendapatkan atau menetapkan kandungan dalam elemen HTML. Contohnya, kod berikut menukar kandungan elemen div dengan ID "kandungan" kepada "Hello World!":

content.innerHTML = "Hello World!";

2. atribut textContent

Atribut textContent boleh diperolehi atau ditetapkan kandungan Teks dalam elemen HTML. Sebagai contoh, kod berikut menukar kandungan teks elemen div dengan ID "kandungan" kepada "Hello World!":

content.textContent = "Hello World!";

3. atribut innerText

The innerText atribut boleh diperolehi atau Tetapkan kandungan teks dalam elemen HTML, tetapi ia tidak memaparkan penanda HTML. Sebagai contoh, kod berikut menukar kandungan teks dalam elemen div dengan ID "kandungan" kepada "Hello World!" tanpa memaparkan teg HTML:

content.innerText = "Hello World!";

Dengan menggunakan kaedah di atas, kami boleh mengubah suai HTML dengan mudah Kandungan dokumen.

3. Tambah elemen HTML

Selain mengubah suai kandungan elemen HTML, kami juga boleh menggunakan Javascript untuk menambah elemen HTML. Elemen HTML boleh dibuat menggunakan kaedah createElement() objek dokumen dan kemudian dimasukkan ke dalam HTML menggunakan kaedah appendChild() atau insertBefore().

Sebagai contoh, kod berikut akan mencipta elemen p baharu dan kemudian memasukkannya ke dalam elemen div dengan ID "kandungan":

var newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
content.appendChild(newParagraph);

Kod di atas akan memasukkan elemen p baharu ke dalam Penghujung elemen div dengan ID "kandungan".

Jika kita ingin memasukkan elemen p baharu pada permulaan elemen div dengan ID "kandungan", kita boleh menggunakan kaedah insertBefore(). Kod berikut akan mencipta elemen p baharu dan memasukkannya pada permulaan elemen div dengan ID "kandungan":

var newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
content.insertBefore(newParagraph, content.firstChild);

Kod di atas akan memasukkan elemen p baharu ke dalam div dengan ID "kandungan "Permulaan unsur.

4. Padam elemen HTML

Akhir sekali, kami juga boleh menggunakan Javascript untuk memadamkan elemen HTML. Elemen HTML boleh dialih keluar daripada HTML menggunakan kaedah removeChild().

Sebagai contoh, kod berikut akan mengalih keluar elemen anak pertama daripada elemen div dengan ID "kandungan":

content.removeChild(content.firstChild);

Kod di atas akan mengalih keluar elemen anak pertama daripada elemen div dengan ID "kandungan" elemen kanak-kanak.

Ringkasan

Dalam artikel ini, kami mempelajari cara menggunakan Javascript untuk mengubah suai kandungan dalam dokumen HTML. Kita boleh menggunakan kaedah getElementById(), kaedah getElementsByClassName(), getElementsByTagName() bagi objek dokumen untuk mendapatkan elemen HTML, gunakan atribut innerHTML, atribut textContent, atribut innerText dan atribut lain untuk mengubah suai kandungan elemen HTML, dan gunakan kaedah createElement() , kaedah appendChild() , kaedah insertBefore() dan kaedah lain untuk menambah elemen HTML dan gunakan kaedah removeChild() untuk memadamkan elemen HTML. Menguasai kaedah ini, anda boleh mengubah suai kandungan dokumen HTML dengan mudah menggunakan Javascript.

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