HTML DOM createElement() 方法
htmlweb developmentfront end technology更新于 2024/6/1 19:24:17
HTML DOM createElement() 方法用于使用 JavaScript 动态创建 HTML 元素。它以元素名称作为参数并创建该元素节点。您需要使用 appendChild() 方法将新创建的元素添加到 DOM 中。
语法
以下是 createElement() 方法的语法 −
document.createElement(nodename)
示例
让我们来看一个 createElement() 方法的示例 −
<!DOCTYPE html>
<html>
<body>
<h1>createElement() example</h1>
<p>Click the below button to create more buttons</p>
<button onclick="createButton()">CREATE</button>
<br><br>
<script>
var i=0;
function createButton() {
i++;
var btn = document.createElement("BUTTON");
btn.innerHTML="BUTTON"+i;
var br= document.createElement("BR");
document.body.appendChild(btn);
document.body.appendChild(br);
}
</script>
</body>
</html>
输出
这将产生以下输出 −
点击"创建"按钮三次。一次点击一个按钮 −
在上面的例子中 −
我们创建了一个按钮 CREATE，当用户点击它时，它会执行 createButton() 方法。
<button onclick="createButton()>CREATE</button>
createButton() 函数创建一个 <button>使用 document 对象的 createElement() 方法创建一个 <button> 元素。使用 innerHTML 设置按钮顶部显示的文本。使用 document 对象的 createElement() 方法创建另一个元素 <br>。然后使用 appendChild() 方法将 <button> 元素和 <br> 元素附加到文档主体中 −
var i=0;
function createButton() {
i++;
var btn = document.createElement("BUTTON");
btn.innerHTML="BUTTON"+i;
var br= document.createElement("BR");
document.body.appendChild(btn);
document.body.appendChild(br);
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
