JavaScript createElement 创建元素
您将学习如何使用 JavaScript document.createElement()创建新的 HTML 元素并将其附加到 DOM 树
在本教程中，您将学习如何使用 JavaScript document.createElement()创建新的 HTML 元素并将其附加到 DOM 树。
要创建 HTML 元素，请使用 document.createElement() 方法：
let element = document.createElement(htmlTag);document.createElement() 接受一个 HTML 标签名并返回一个 Element 类型的新 Node。
创建 div 元素
假设您有以下 HTML 文档：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS CreateElement Demo</title>
</head>
<body>
</body>
</html>以下示例使用 document.createElement() 来创建新的 <div> 元素：
let div = document.createElement('div');并将 HTML 片段添加到 div：
div.innerHTML = '<p>CreateElement example</p>';要将 div 附加到 DOM 文档，请使用 appendChild() 方法：
document.body.appendChild(div);把它们放在一起：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS CreateElement Demo</title>
</head>
<body>
<script>
let div = document.createElement('div');
div.id = 'content';
div.innerHTML = '<p>CreateElement example</p>';
document.body.appendChild(div);
</script>
</body>
</html>添加 id
如果要向 div 元素添加 id 属性，可以将元素的 id 属性设置为一个值，如下所示：
let div = document.createElement('div');
div.id = 'content';
div.innerHTML = '<p>CreateElement example</p>';
document.body.appendChild(div);添加 class
以下示例为 div 元素设置 CSS class属性，值是 note：
let div = document.createElement('div');
div.id = 'content';
div.className = 'note';
div.innerHTML = '<p>CreateElement example</p>';
document.body.appendChild(div)添加文本
要将一段文本添加到 div 元素，您可以使用上面示例中的 innerHTML 属性，或者创建一个新 Text 节点并将其附加到 div 元素：
// create a new div and set its attributes
let div = document.createElement('div');
div.id = 'content';
div.className = 'note';
// create a new text node and add it to the div
let text = document.createTextNode('CreateElement example');
div.appendChild(text);
// add div to the document
document.body.appendChild(div);添加元素
要将元素添加到 div 元素，您可以使用以下 appendChild() 方法创建一个元素并将其附加到 div ：
let div = document.createElement('div');
div.id = 'content';
div.className = 'note';
// create a new heading and add it to the div
let h2 = document.createElement('h2');
h2.textContent = 'Add h2 element to the div';
div.appendChild(h2);
// add div to the document
document.body.appendChild(div);创建 li 元素列表
假设您有一个列表：
<ul id="menu">
<li>Home</li>
</ul>以下代码向 ul 添加两个 li 元素：
let li = document.createElement('li');
li.textContent = 'Products';
menu.appendChild(li);
li = document.createElement('li');
li.textContent = 'About Us';
// select the ul menu element
const menu = document.querySelector('#menu');
menu.appendChild(li);输出：
<ul id="menu">
<li>Home</li>
<li>Products</li>
<li>About Us</li>
</ul>创建 script 元素
有时，您可能希望动态加载 JavaScript 文件。您可以使用 document.createElement 创建 script 元素并将其添加到 DOM 文档。
以下示例说明如何创建新 script 元素并将 /lib.js 文件加载到 DOM 文档：
let script = document.createElement('script');
script.src = '/lib.js';
document.body.appendChild(script);您可以首先创建一个新的辅助函数，从 URL 加载 JavaScript 文件：
function loadJS(url) {
let script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}然后使用辅助函数加载文件 /lib.js：
loadJS('/lib.js');要异步加载 JavaScript 文件，请将 script 元素的 async属性设置为 true：
function loadJSAsync(url) {
let script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
}结论
document.createElement 创建一个新的 HTML 元素。element.appendChild 方法将HTML 元素附加到现有元素。
