---
title: "如何在 JavaScript 中用一行程式碼建立帶有屬性的 HTML 元素"
description: "在開發 JavaScript 專案時，動態建立 HTML 元素是很常見的需求。傳統上，你可能會用好幾行程式碼來建立元素並逐一設定多個屬性…"
canonical: https://oozou.com/til/how-to-create-an-html-element-with-attributes-in-one-line-in-javascript-69
locale: zh-Hant
date: 2020-10-13
topic: javascript
---

# 如何在 JavaScript 中用一行程式碼建立帶有屬性的 HTML 元素

> 在開發 JavaScript 專案時，動態建立 HTML 元素是很常見的需求。傳統上，你可能會用好幾行程式碼來建立元素並逐一設定多個屬性…

Published: 2020-10-13 · Topic: [javascript](https://oozou.com/zh-Hant/til-topics/javascript) ([markdown](https://oozou.com/zh-Hant/til-topics/javascript.md))

在開發 JavaScript 專案時，動態建立 HTML 元素是很常見的需求。傳統上，你可能會用好幾行程式碼來建立元素並逐一設定多個屬性，如下所示：

```
const a = document.createElement('a')
a.setAttribute('class', 'foo bar')
a.setAttribute('id', 'id')
a.setAttribute('innerHTML', 'Hello World!')
a.setAttribute('href', 'https://www.google.com/')
```

雖然這種做法可行，但一個一個設定屬性相當繁瑣，在大型程式碼庫中尤其如此。這也會讓程式碼變得臃腫，使程式碼庫更難維護、也更難除錯。  

在這篇文章中，我們會探討一種更簡潔的方法，用一行程式碼建立 HTML 元素並設定屬性，讓你的程式碼更有效率、更易讀。

# 用 Object.assign() 一行建立 HTML 元素

JavaScript 的 Object.assign() 方法可以讓你在建立 HTML 元素的同時一次指定多個屬性。這樣一來，你可以精簡程式碼，減少逐一設定屬性所帶來的重複。

做法如下：

```
Object.assign(document.createElement('a'), {
  id: 'id',
  class: 'whatever class',
  href: 'https://www.google.com/',
  innerHTML: 'This is a link'
});
```

透過這一行程式碼，你建立了一個 anchor (\<a>) 標籤，並一次設定它的 id、class、href 和 innerHTML 屬性。這不僅省時，也讓程式碼更乾淨、更容易維護。  

**程式碼解析：**

- Object.assign() 是一個把一或多個來源物件的所有屬性複製到目標物件的方法。在這個例子中，目標是 document.createElement('a')，它會建立一個新的 anchor 元素。
- 在 Object.assign() 的第二個參數中，你傳入一個物件，內含你想指定給該元素的屬性。
- 物件中的每個 key 對應一個 HTML 屬性或 property（id、class、href 等），而 value 則是該屬性的值。

**使用 Object.assign() 的好處**

- **更乾淨的程式碼：**你可以在一行內設定多個屬性，減少程式碼重複。
- **可維護性：**這種做法讓程式碼更容易維護。由於屬性是一起設定的，集中在同一個地方管理也更簡單。
- **更好的可讀性：**把屬性指定整合在一起後，程式碼更易讀，行數也更少。

**什麼時候該用 Object.assign()**

雖然這個方法在多數情境都很實用，但在以下情況特別有幫助：

- 你需要動態建立多個帶有不同屬性的元素。
- 你想盡量減少程式碼行數，尤其是在大型專案中。
- 你想一次套用一整批屬性，確保相似元素之間的一致性。

其他用一行建立帶屬性元素的替代方案

**使用展開運算子與解構**

另一種在單行內建立帶屬性 HTML 元素的方式，是使用 JavaScript 的展開運算子與解構功能。

```
const attributes = {
  id: 'id',
  class: 'foo bar',
  href: 'https://www.google.com/',
  innerHTML: 'Hello World!'
};

const a = Object.assign(document.createElement('a'), {...attributes});
```

這裡我們把屬性存在一個物件（attributes）中，並在建立元素時用展開運算子（...attributes）指定這些屬性。這個方法很有彈性，讓你能輕鬆在其他元素上重用同一組屬性，或動態自訂屬性。  

**使用自訂函式**  
你也可以建立一個可重用的函式，用一行建立帶屬性的元素。

```
function createElement(tag, attributes) {
  return Object.assign(document.createElement(tag), attributes);
}

const a = createElement('a', {
  id: 'id',
  class: 'foo bar',
  href: 'https://www.google.com/',
  innerHTML: 'Hello World!'
});
```

在這個範例中，createElement() 接收兩個引數：標籤名稱（例如 'a'、'div' 等）以及一個包含所需屬性的物件。這個自訂函式可以在整個程式碼中重複使用，讓程式更模組化、也更容易更新。

# 結論

逐一設定 HTML 元素的屬性既耗時又容易產生重複的程式碼。使用 Object.assign() 可以讓你在一行內建立 HTML 元素並指定多個屬性，提升程式碼的可讀性與可維護性。此外，像展開運算子或自訂函式等其他方法，也能幫助你精簡程式碼、提升效率。

把這些技巧納入你的 JavaScript 專案後，你就能寫出更乾淨、更容易維護的程式碼，在講求效率的複雜網頁應用程式中特別有用。  

---

# 常見問題

**1. JavaScript 中的 Object.assign() 是什麼？**  
Object.assign() 是一個把一或多個來源物件的所有可列舉屬性複製到目標物件的方法。它常用於合併物件，或以簡潔的方式在物件上設定屬性。

**2. 有可能用一行建立帶有多個屬性的 HTML 元素嗎？**  
可以，使用 Object.assign() 或類似的方法，你就能在一行內建立 HTML 元素並指定多個屬性。

**3. 用 Object.assign() 設定 HTML 屬性有什麼好處？**

使用 Object.assign() 讓你的程式碼更乾淨、更易讀，也更容易維護。它減少了逐一設定屬性的需要，把它們整合成一行。

**4. 我可以把 Object.assign() 和展開運算子等其他 JavaScript 功能一起使用嗎？**  
當然可以！你可以把 Object.assign() 與展開運算子甚至解構結合使用，進一步提升程式碼的可讀性與可重用性。

**5. 除了 Object.assign()，還有哪些一行設定屬性的替代方案？**  
替代方案包括使用展開運算子、解構，或建立一個自訂函式來封裝在元素上設定屬性的邏輯。

---

透過 Object.assign() 這類方法最佳化你的 JavaScript 程式碼，可以改善你的開發流程，讓它更有效率並減少樣板程式碼的數量。這種做法也符合現代最佳實踐，確保你的 JavaScript 應用程式具備可擴充性與可維護性。

---

Contact OOZOU: hello@oozou.com · +66 2544 0000 · https://oozou.com/zh-Hant/contact

More for AI agents: https://oozou.com/llms.txt · every page has a markdown twin at its URL plus ".md"