如何使用 JavaScript 創建 DOM 元素

在 vanilla JavaScript 中，您可以使用 createElement() 方法來創建一個新的 DOM 元素。此方法將元素名稱作為輸入，並使用給定名稱創建一個新的 HTML 元素。

不像 jQuery 的 $(...) 將元素的開始和結束標記作為輸入來創建新元素的方法：

const div = $('<div></div>');

createElement() 方法只有 需要元素名稱：

const anchor = document.createElement('a');
const div = document.createElement('div');
const article = document.createElement('article');

創建元素後，可以使用innerText 或 innerHTML 添加文本以及子 HTML 節點的元素屬性：

// add text
div.innerText = 'Hey, there!';

// add child HTML nodes
div.innerHTML = '<p>Hello World!!!</p>';

這種方法不僅限於 HTML 標籤。您甚至可以創建自定義標籤 您自己的選擇：

const unicorn = document.createElement('unicorn');
// <unicorn></unicorn>

為了將新創建的 HTML 元素附加到文檔中，JavaScript 提供了 appendChild() 方法：

// create a new element
const div = document.createElement('div');
div.innerText = 'Hey, there!';

// append element to body
document.body.appendChild(div);