在 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 屬性的值來設定它的樣式。