Document.createElement 教程
最后修改于 2023 年 8 月 24 日
Document.createElement 教程演示了如何在 JavaScript 中使用 Document.createElement 创建新的 DOM 元素。
Document.createElement
Document.createElement() 创建一个新的 DOM 元素。
创建元素后，我们使用 appendChild 将其插入到文档中。
Document.createElement 示例
以下示例演示了文档的 createElement 函数的用法。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document.createElement</title>
</head>
<body>
<button id="mybtn">Create</button>
<script src="main.js"></script>
</body>
</html>
在示例中，我们有一个“创建”按钮，当我们单击它时，它会创建一个新的段落。
main.js
const btn = document.getElementById('mybtn');
btn.addEventListener('click', generateElement);
function generateElement() {
let el = document.createElement("p");
el.innerText = 'A paragraph';
document.body.appendChild(el);
}
JavaScript 代码向按钮添加了一个事件监听器。处理函数使用 document.createelement 创建一个新元素，并将文本插入到该元素中。然后使用 appendChild 函数将该元素追加到文档的 body 标签中。
在本篇文章中，我们展示了如何使用 document.createElement 函数创建新元素。