Cara menggunakan JavaScript untuk menukar kandungan HTML

JavaScript ialah bahasa yang sangat penting dalam pembangunan bahagian hadapan. Dalam JavaScript, dengan memanipulasi DOM, kita boleh mengubah suai kandungan, gaya, struktur, dll. dokumen HTML. Dalam artikel ini, kami akan memperkenalkan cara menggunakan JavaScript untuk menukar kandungan HTML.

1. Memanipulasi DOM

DOM (Document Object Model) ialah antara muka pengaturcaraan yang ditakrifkan oleh W3C untuk mengakses dokumen HTML, XML dan SVG. Melalui DOM, kami boleh memanipulasi elemen dan atribut dalam dokumen HTML dalam kod JavaScript.

Untuk menukar kandungan HTML, kita perlu terlebih dahulu mendapatkan elemen untuk diubah suai. Melalui objek dokumen dalam JavaScript, kita boleh menggunakan getElementById(), getElementsByClassName(), getElementsByTagName() dan kaedah lain untuk mendapatkan elemen dalam dokumen HTML, dan kemudian beroperasi pada elemen ini.

Sebagai contoh, kita boleh mendapatkan elemen dengan id "demo" melalui kod berikut:

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

2. Tukar kandungan HTML

Selepas mendapat elemen , kami boleh Mengubah suai kandungan elemen ini melalui JavaScript. JavaScript menyediakan pelbagai kaedah untuk menukar kandungan HTML.

1. atribut innerHTML

Kami boleh mengubah suai kandungan elemen HTML dengan mengakses atribut innerHTML. Sifat innerHTML menetapkan atau mengembalikan kandungan HTML elemen.

Sebagai contoh, kita boleh menukar kandungan teks elemen p kepada "Hello World" melalui kod berikut:

var p = document.getElementById("myParagraph");
p.innerHTML = "Hello World";

2. textContent attribute

Sifat textContent ialah sifat baca sahaja yang mengembalikan kandungan teks elemen. Tidak seperti atribut innerHTML, textContent mengembalikan kandungan teks biasa elemen, tidak termasuk penanda HTML.

Sebagai contoh, kita boleh mendapatkan kandungan teks elemen p melalui kod berikut:

var p = document.getElementById("myParagraph");
var text = p.textContent;

3. innerText attribute

Atribut innerText ialah serupa dengan atribut innerHTML , juga digunakan untuk menetapkan atau mengembalikan kandungan teks sesuatu elemen. Perbezaannya ialah innerText mengembalikan kandungan teks elemen dan elemen turunannya, manakala innerHTML mengembalikan kandungan teks yang mengandungi tag HTML.

Sebagai contoh, kita boleh menukar kandungan teks elemen p kepada "Hello World" melalui kod berikut:

var p = document.getElementById("myParagraph");
p.innerText = "Hello World";

4. atribut nilai

Atribut nilai digunakan terutamanya untuk mengubah suai nilai elemen bentuk seperti kotak input teks, kotak lungsur turun dan kotak butang radio.

Sebagai contoh, kita boleh mengubah suai nilai kotak input teks melalui kod berikut:

var input = document.getElementById("myInput");
input.value = "Hello World";

3. Ringkasan

Dalam JavaScript, dengan memanipulasi elemen DOM, kita boleh menukar kandungan dokumen HTML dengan mudah. Artikel ini memperkenalkan beberapa kaedah untuk menukar kandungan HTML, termasuk innerHTML, textContent, innerText dan atribut nilai. Kita boleh memilih kaedah yang sesuai untuk mengendalikan elemen HTML mengikut situasi sebenar untuk mencapai pelbagai keperluan dalam pembangunan front-end.

Atas ialah kandungan terperinci Cara menggunakan JavaScript untuk menukar kandungan HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!