JavaScript document.createElement() 实用示例

摘要: 本教程将教你如何使用 JavaScript document.createElement() 创建一个新的 HTML 元素并将其附加到 DOM 树。

要创建一个 HTML 元素，请使用 document.createElement() 方法。

let element = document.createElement(htmlTag);Code language: JavaScript (javascript)

document.createElement() 接受一个 HTML 标签名称，并返回一个新的类型为 Element 的 Node。

1) 创建一个新的 div 示例

假设你拥有以下 HTML 文档。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS CreateElement Demo</title>
</head>
<body>

</body>
</html>Code language: HTML, XML (xml)

以下示例使用 document.createElement() 创建一个新的 <div> 元素。

let div = document.createElement('div');Code language: JavaScript (javascript)

并向 div 添加一个 HTML 片段。

div.innerHTML = '<p>CreateElement example</p>';Code language: JavaScript (javascript)

要将 div 附加到文档，请使用 appendChild() 方法。

document.body.appendChild(div);Code language: JavaScript (javascript)

将它们整合起来

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript 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>Code language: HTML, XML (xml)

向 div 添加 id

如果你想向 div 添加一个 id，请将元素的 id 属性设置为一个值，如下所示。

let div = document.createElement('div');
div.id = 'content';
div.innerHTML = '<p>CreateElement example</p>';

document.body.appendChild(div);Code language: JavaScript (javascript)

向 div 添加类

以下示例设置了一个新的 div 的 CSS 类 note。

let div = document.createElement('div');
div.id = 'content';
div.className = 'note';
div.innerHTML = '<p>CreateElement example</p>';

document.body.appendChild(div);Code language: JavaScript (javascript)

向 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);Code language: JavaScript (javascript)

向 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);Code language: JavaScript (javascript)

2) 创建新的列表项 (li) 示例

假设你有一系列项目。

<ul id="menu">
    <li>Home</li>
</ul>Code language: JavaScript (javascript)

以下代码向 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);Code language: JavaScript (javascript)

输出

<ul id="menu">
    <li>Home</li>
    <li>Products</li>
    <li>About Us</li>
</ul>Code language: HTML, XML (xml)

3) 创建一个 script 元素示例

有时，你可能想要动态加载一个 JavaScript 文件。为此，你可以使用 document.createElement() 创建 script 元素并将其添加到文档。

以下示例说明了如何创建一个新的 script 元素，并将 /lib.js 文件加载到文档。

let script = document.createElement('script');
script.src = '/lib.js';
document.body.appendChild(script);Code language: JavaScript (javascript)

你可以首先创建一个新的辅助函数，从 URL 加载 JavaScript 文件。

function loadJS(url) {
    let script = document.createElement('script');
    script.src = url;
    document.body.appendChild(script);
}Code language: JavaScript (javascript)

然后使用辅助函数加载 /lib.js 文件。

loadJS('/lib.js');Code language: JavaScript (javascript)

要异步加载 JavaScript 文件，请将 script 元素的 async 属性设置为 true。

function loadJSAsync(url) {
    let script = document.createElement('script');
    script.src = url;
    script.async = true;
    document.body.appendChild(script);
}Code language: JavaScript (javascript)

总结

document.createElement() 创建一个新的 HTML 元素。
element.appendChild() 将一个 HTML 元素附加到现有元素。

测验

本教程对您有帮助吗？