跳至內容

JavaScript/Adding elements

維基教科書,自由的教學讀本

基本用法[編輯]

使用「文檔對象模塊」,我們可以創建基本的 HTML 元素。 讓我們創建一個 div

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

現在,該元素已創建,但到目前為止它不存在於實際頁面上,僅存在於內存中。

如果我們希望 div 有一個 ID 或一個類怎麼辦?

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

我們希望它添加到頁面中? 讓我們再次使用 DOM……

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

進一步使用[編輯]

所以讓我們有一個簡單的 HTML 頁面......

<html>
<head>
</head>
<body bgcolor="white" text="blue">
  <h1> A simple Javascript created button </h1>
  <div id="button"></div>
</body>
</html>

div 有按鈕 id 的地方,讓我們添加一個按鈕。

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

所有的 HTML 代碼看起來像:

<html>
<head>
</head>
<body bgcolor="white" text="blue">
  <h1> A simple Javascript created button </h1>
  <div id="button"></div>
  </body>
<script>
myButton = document.createElement("input");
myButton.type = "button";
myButton.value = "my button";
placeHolder = document.getElementById("button");
placeHolder.appendChild(myButton);
</script>
</html>

該頁面現在將有一個通過 JavaScript 創建的按鈕。