JavaScript/Menambah Unsur

Daripada Wikibooks
Jump to navigation Jump to search
Sebelum: Mencari Unsur Indeks Berikut: Mengubah Unsur

Penggunaan Asas[sunting]

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[sunting]

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