HTML JavaScript
DOM HTML JavaScript - Menukar HTML
DOM HTML membenarkan JavaScript menukar kandungan elemen HTML.
Tukar strim output HTML
JavaScript boleh mencipta kandungan HTML dinamik:
Tarikh hari ini ialah: Rab 26 Okt 2016 10:01:53 GMT+0800 (Waktu Standard China)
Dalam JavaScript, document.write() boleh digunakan untuk menulis kandungan terus ke strim output HTML.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script> document.write(Date()); </script> </body> </html>
Jangan gunakan document.write() selepas dokumen selesai dimuatkan. Ini akan menulis ganti dokumen.
Menukar Kandungan HTML
Cara paling mudah untuk mengubah suai kandungan HTML ialah menggunakan atribut innerHTML.
Untuk menukar kandungan elemen HTML, gunakan sintaks ini:
document.getElementById(id).innerHTML=new HTML
Contoh ini menukar <h1> ; kandungan:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新標(biāo)題";
</script>
</body>
</html>Contoh penjelasan:
Dokumen HTML di atas mengandungi elemen <h1> dengan id="header"
Kami menggunakan HTML DOM untuk mendapatkan elemen id="header "
JavaScript menukar kandungan elemen ini (innerHTML)
menukar atribut HTML
Untuk menukar atribut elemen HTML, Sila gunakan sintaks ini:
document.getElementById(id).attribute=new attribute value
Contoh ini menukar atribut src elemen <img>:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<p>原圖片為 smiley.gif,腳本將圖片修改為 landscape.jpg</p>
</body>
</html>Contoh Penjelasan :
Dokumen HTML di atas mengandungi elemen <img> dengan id="image"
Kami menggunakan HTML DOM untuk mendapatkan elemen dengan id="image"
JavaScript Tukar atribut elemen ini (tukar "../style/images/smiley.gif" kepada "../style/images/landscape.jpg")
