在本教程中,您将学习如何使用 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 元素附加到现有元素。