在 JavaScript 中创建 div 元素

我们经常需要在我们的 Web 应用程序中动态构建和自定义 div 元素。在本教程中，我们将使用 JavaScript 来构造和自定义 div。

在 JavaScript 中使用 document.createElement() 方法

使用 document.createElement，我们可以创建一个 HTML 元素。createElement 是一种创建元素的技术。

我们提供我们希望构建的元素的标签名称作为字符串来使用它。

示例代码：

const div = document.createElement('div');
div.style.width = '60px';
div.style.height = '20px';
div.style.background = 'green';
div.style.color = 'white';
div.innerHTML = 'Upwork';

document.body.appendChild(div);

输出：

运行代码

设置样式并将其作为子元素附加到 body 元素以创建 div。元素对象由 createElement. 返回。然后可以设置 style 属性的属性以应用各种样式。

在 style 属性中，所有的 CSS 属性都是驼峰式的。HTML 元素的内容是通过 innerHTML 设置的。

使用 document.body.innerHTML 更改 JavaScript 中的属性

我们还可以更改文档的 innerHTML 属性。要将内容添加到 body 元素，请将 body 转换为带有 HTML 代码的字符串。

示例代码：

const div = '<div>Upwork</div>';
document.body.innerHTML = div;

输出：

运行代码

document.createElement 是一种创建元素的技术。使用它，我们可以制作一个 div。然后我们可以通过设置 style 属性的值来设置它的样式。