JavaScript/Menambah Unsur

Penggunaan Asas

Dengan mengguna Model Objek Dokumen (DOM), kita dapat membuat unsur-unsur HTML pada dokumen. Mari kita reka div.

var myDiv = document.createElement("div");

Bagaimana sekiranya anda mahu div yang mengandungi id atau class?

var myDiv = document.createElement("div");
myDiv.id = "myDiv";
myDiv.class = "main";

Dan jika anda mahu menambahnya pada laman? Mari kita guna DOM sekali lagi...

var myDiv = document.createElement("div");
myDiv.id = "myDiv";
myDiv.class = "main";
document.documentElement.appendChild(myDiv);

Kegunaan Lanjut

Katakan kita ada sebuah laman HTML ringkas...

<html>
<head>
</head>
<body bgcolor="white" text="blue">
<h1> Butang ringkas buatan JavaScript </h1>
<div id="butang"></div>
</body>
</html>

Di mana div memiliki id "butang". mari kita tambah butang:

myButton = document.createElement("input");
myButton.type = "button";
myButton.value = "butang saya";
placeHolder = document.getElementById("butang");
placeHolder.appendChild(myButton);

Kod HTML kelihatan demikian:

<html>
<head>
</head>
<body bgcolor="white" text="blue">
<h1> Butang ringkas buatan JavaScript </h1>
<div id="butang"></div>
</body>
<script>
myButton = document.createElement("input");
myButton.type = "button";
myButton.value = "butang saya";
placeHolder = document.getElementById("butang");
placeHolder.appendChild(myButton);
</script>
</html>

Sekarang laman akan memaparkan butang yang dijana oleh JavaScript.

TODO	Nota penterjemah: Perhatikan kod dengan teliti. Lihat di mana "button" boleh diubah kepada "butang" dan di mana ia tidak boleh diubah

Sebelum: Mencari Unsur

Indeks

Berikut: Mengubah Unsur