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 创建的按钮。