在 JavaScript 中建立 div 元素

1. 在 JavaScript 中使用 document.createElement() 方法
2. 使用 document.body.innerHTML 更改 JavaScript 中的屬性

我們經常需要在我們的 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 屬性的值來設定它的樣式。