跳转到内容

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