在 JavaScript 中创建 div 元素

Shiv Yadav 2023年1月30日 2022年5月1日
  1. 在 JavaScript 中使用 document.createElement() 方法
  2. 使用 document.body.innerHTML 更改 JavaScript 中的属性
在 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);

输出:

使用 document.createElement 方法

运行代码

设置样式并将其作为子元素附加到 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.body.innerHTML 更改属性

运行代码

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

Author: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

LinkedIn

相关文章 - JavaScript Element