HTML | DOM createElement() 方法

HTML | DOM createElement() 方法，是一种用于创建 HTML 元素的方法。通过该方法，可以动态地创建 HTML 元素并添加到网页上。

语法

document.createElement(tagName)

参数：

• tagName: 要创建的元素的标签名。

返回值

返回一个新创建的元素节点。

示例

下面是一个使用 createElement() 方法创建 div 元素并添加到网页上的示例：

// 创建一个 div 元素
var div = document.createElement("div");

// 设置 div 元素的样式
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "red";

// 将 div 元素添加到 body 中
document.body.appendChild(div);

这段代码会在页面上创建一个宽高为 100px 的红色正方形。

适用性

使用 createElement() 方法可以动态地创建 HTML 元素，并在网页中添加、删除和修改这些元素。这种技术广泛应用于现代 Web 开发中，尤其是单页应用程序和前端框架中。

注意事项

1. 创建的元素并未添加到文档中，需要通过 appendChild() 方法将其添加到文档中。

2. 在创建元素时，可以设置元素的属性和样式。例如：element.style.color = "red";。

3. 在添加元素到文档中前，可以通过修改元素的属性和样式来预设元素的外观。例如：element.innerText = "Hello";。

4. 在创建元素后，可以通过 setAttribute() 方法设置元素的属性。例如：element.setAttribute("class", "my-class");。

参考链接

• HTML DOM createElement() 方法