---
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-Hans
date: 2020-10-13
topic: javascript
---

# 如何在 JavaScript 中用一行代码创建带属性的 HTML 元素

> 在开发 JavaScript 项目时，动态创建 HTML 元素是很常见的需求。传统上，你可能要写好几行代码来创建元素，再一个个设置属性…

Published: 2020-10-13 · Topic: [javascript](https://oozou.com/zh-Hans/til-topics/javascript) ([markdown](https://oozou.com/zh-Hans/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 项目里，你就能写出更干净、更好维护的代码，在讲究效率的复杂 Web 应用中尤其管用。  

---

# 常见问题

**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-Hans/contact

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