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