5

JavaScript createElement 创建元素

 1 year ago
source link: https://www.myfreax.com/javascript-createelement/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
dom

JavaScript createElement 创建元素

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

Updated At 20 Dec 2023 3 min read
By myfreax
JavaScript createElement 创建元素

JavaScript createElement 创建元素

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

如果要向 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 元素附加到现有元素。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK