在 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