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 創建的按鈕。