JavaScript mengubah suai kandungan div

Dalam pembangunan bahagian hadapan, JavaScript sering digunakan untuk mengubah suai kandungan pada halaman, terutamanya untuk mengubah suai kandungan dalam elemen div. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mengubah suai kandungan dalam elemen div.

1. Ubah suai atribut innerHTML melalui

atribut innerHTML untuk mengembalikan atau menetapkan kandungan HTML. Dengan mengubah suai atribut innerHTML, kami boleh menukar kandungan dalam elemen div. Contohnya:

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    document.getElementById("myDiv").innerHTML = "修改后的内容";
}
</script>

Selepas mengklik butang, kandungan dalam div akan diubah suai kepada "kandungan yang diubah suai".

Perlu diambil perhatian bahawa atribut innerHTML boleh menetapkan sebarang teg dan atribut HTML. Contohnya:

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    document.getElementById("myDiv").innerHTML = "<p style='color: red;'>修改后的内容</p>";
}
</script>

Contoh ini menukar kandungan dalam div kepada teg perenggan merah.

2. Ubah suai melalui atribut textContent

Jika kita hanya mahu mengubah suai kandungan teks dalam elemen div, kita boleh menggunakan atribut textContent. Sifat textContent mengembalikan atau menetapkan kandungan teks dalam elemen semasa, di mana teg dan atribut HTML diabaikan. Contohnya:

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    document.getElementById("myDiv").textContent = "修改后的文本内容";
}
</script>

Selepas mengklik butang, kandungan dalam div akan diubah suai kepada "kandungan teks yang diubah suai".

3 Ubah suai melalui kaedah createElement dan appendChild

createElement dan appendChild ialah dua kaedah DOM yang biasa digunakan, digunakan untuk mencipta dan memasukkan elemen HTML baharu. Kita boleh mengubah suai kandungan dalam elemen div melalui dua kaedah ini.

Sebagai contoh, kita boleh membuat teg p baharu dahulu dan kemudian menambahkannya pada elemen div. Kodnya adalah seperti berikut:

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    var newP = document.createElement("p");
    var newText = document.createTextNode("修改后的内容");
    newP.appendChild(newText);
    document.getElementById("myDiv").appendChild(newP);
}
</script>

Selepas mengklik butang, div akan mempunyai tag p baharu dengan kandungan "Kandungan diubah suai".

Perlu diambil perhatian bahawa elemen baharu yang ditambah melalui kaedah createElement dan appendChild baru ditambah berdasarkan kandungan asal. Jika anda perlu menggantikan kandungan asal, anda boleh menggunakan atribut innerHTML atau textContent.

Ringkasnya, adalah sangat mudah untuk menggunakan JavaScript untuk mengubah suai kandungan elemen div Kita boleh memilih kaedah yang berbeza untuk beroperasi mengikut keperluan kita. Untuk lebih banyak kandungan tentang JavaScript, sila teruskan mengikuti blog saya!

Atas ialah kandungan terperinci JavaScript mengubah suai kandungan div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!