JavaScript createElement 创建元素

您将学习如何使用 JavaScript document.createElement()创建新的 HTML 元素并将其附加到 DOM 树

December 20, 2023

3 min read

113

在本教程中，您将学习如何使用 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);
}