JavaScript 創建元素 在 web 開發中，元素的創建是不可避免的需求。通過 JavaScript 可以動態地創建和修改 HTML 元素，從而實現頁面的交互效果。 創建元素 要想創建元素，我們首先需要找到想要添加元素的父節點，然后調用其子節點的創建方法。 例如，我們想要在一個 id 為 container 的 div 中添加一個 h1 標題，我們可以這樣寫：

var container = document.getElementById("container");
var title = document.createElement("h1");
container.appendChild(title);

在上面的例子中，我們通過 document.getElementById() 獲取了父節點 container，然后通過 createElement() 方法創建了一個 h1 元素，并將其添加到 container 中。 屬性和文本 創建元素后，我們還可以對其添加屬性和文本。我們可以使用元素的 setAttribute() 方法來添加屬性，在元素中使用 innerText 或 innerHTML 屬性來添加文本。 例如，創建一個 a 標簽，并為其添加 href 和文本：

var link = document.createElement("a");
link.setAttribute("href", "https://www.example.com");
link.innerText = "Example Website";
container.appendChild(link);

在這個例子中，我們通過 createElement() 方法創建了一個 a 標簽，并使用 setAttribute() 方法添加了 href 屬性。然后使用 innerText 屬性添加文本，最后將其添加到 container 中。 樣式 元素的樣式可以通過 CSS 修改。我們可以使用 JavaScript 來添加樣式類和樣式屬性。 例如，我們想要將 h1 標題的字體顏色修改為紅色，我們可以這樣寫：

title.classList.add("red");

這個例子中，我們通過 classList 屬性添加了一個名稱為 red 的樣式類。然后在 CSS 中定義這個樣式類：

.red {
color: #f00;
}

這樣，我們就成功將 h1 標題的字體顏色修改為紅色了。 總結 通過 JavaScript 創建元素，我們可以實現頁面的動態效果。我們可以通過 createElement() 方法創建元素，通過 setAttribute()、innerText 和 innerHTML 屬性添加屬性和文本，通過 classList 屬性添加樣式類來修改元素的樣式。