---
title: "วิธีสร้าง HTML Element พร้อม Attribute ในบรรทัดเดียวด้วย JavaScript"
description: "เวลาทำโปรเจกต์ JavaScript การสร้าง HTML element แบบ dynamic เป็นเรื่องปกติ ตามวิธีดั้งเดิม คุณอาจต้องใช้โค้ดหลายบรรทัดเพื่อสร้าง element แล้วตั้งค่า attribute ทีละตัว…"
canonical: https://oozou.com/til/how-to-create-an-html-element-with-attributes-in-one-line-in-javascript-69
locale: th
date: 2020-10-13
topic: javascript
---

# วิธีสร้าง HTML Element พร้อม Attribute ในบรรทัดเดียวด้วย JavaScript

> เวลาทำโปรเจกต์ JavaScript การสร้าง HTML element แบบ dynamic เป็นเรื่องปกติ ตามวิธีดั้งเดิม คุณอาจต้องใช้โค้ดหลายบรรทัดเพื่อสร้าง element แล้วตั้งค่า attribute ทีละตัว…

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

เวลาทำโปรเจกต์ JavaScript การสร้าง HTML element แบบ dynamic เป็นเรื่องปกติ ตามวิธีดั้งเดิม คุณอาจต้องใช้โค้ดหลายบรรทัดเพื่อสร้าง element แล้วตั้งค่า attribute ทีละตัว ดังตัวอย่างด้านล่าง:

```
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/')
```

วิธีนี้ใช้งานได้ก็จริง แต่การตั้งค่า attribute ทีละตัวนั้นน่าเบื่อ โดยเฉพาะเมื่อทำงานกับ codebase ขนาดใหญ่ และยังทำให้โค้ดบวมโดยไม่จำเป็น ซึ่งทำให้ codebase ดูแลรักษายากขึ้นและ debug ลำบากขึ้นด้วย  

ในบทความนี้เราจะมาดูวิธีที่กระชับกว่าในการสร้าง HTML element พร้อมตั้งค่า attribute ในบรรทัดเดียว เพื่อให้โค้ดมีประสิทธิภาพและอ่านง่ายขึ้น

# สร้าง HTML Element ในบรรทัดเดียวด้วย Object.assign()

Method Object.assign() ของ JavaScript ช่วยให้คุณสร้าง HTML element และกำหนด property หลายตัวพร้อมกันได้ในครั้งเดียว ทำให้โค้ดกระชับขึ้นและลดการทำซ้ำจากการตั้งค่า attribute ทีละตัว

ทำได้แบบนี้:

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

ด้วย one-liner นี้ คุณกำลังสร้าง tag anchor (\<a>) พร้อมตั้งค่า property id, class, href และ innerHTML ทั้งหมดในคราวเดียว นอกจากจะประหยัดเวลาแล้ว ยังทำให้โค้ดสะอาดและดูแลรักษาง่ายขึ้นด้วย  

**แจกแจงโค้ดทีละส่วน:**

- Object.assign() คือ Method ที่ copy property ทั้งหมดจาก source object หนึ่งตัวหรือหลายตัวไปยัง target object ในกรณีนี้ target คือ document.createElement('a') ซึ่งสร้าง anchor element ตัวใหม่ขึ้นมา
- ใน parameter ตัวที่สองของ Object.assign() เราส่ง object ที่บรรจุ attribute ที่ต้องการกำหนดให้กับ element เข้าไป
- key แต่ละตัวใน object จะตรงกับ attribute หรือ property ของ HTML (id, class, href ฯลฯ) ส่วน value คือค่าของ attribute นั้น

**ข้อดีของการใช้ Object.assign()**

- **โค้ดสะอาดขึ้น:** ตั้งค่า attribute หลายตัวได้ในบรรทัดเดียว ลดโค้ดซ้ำซ้อน
- **ดูแลรักษาง่าย:** วิธีนี้ทำให้โค้ดดูแลรักษาง่ายขึ้น เพราะ attribute ถูกตั้งค่าไว้ด้วยกัน จึงจัดการจากที่เดียวได้สะดวกกว่า
- **อ่านง่ายขึ้น:** เมื่อรวมการกำหนด attribute ไว้ด้วยกัน โค้ดจะอ่านง่ายขึ้นและใช้จำนวนบรรทัดน้อยลง

**ควรใช้ Object.assign() เมื่อไหร่**

แม้วิธีนี้จะใช้ได้กับเกือบทุกสถานการณ์ แต่มันมีประโยชน์เป็นพิเศษเมื่อ:

- คุณต้องสร้าง element หลายตัวแบบ dynamic โดยแต่ละตัวมี attribute ต่างกัน
- คุณอยากลดจำนวนบรรทัดของโค้ด โดยเฉพาะในโปรเจกต์ใหญ่ ๆ
- คุณอยากให้ element ที่คล้ายกันมีความสม่ำเสมอ ด้วยการกำหนด attribute เป็นชุดในครั้งเดียว

ทางเลือกอื่นสำหรับการสร้าง Element พร้อม Attribute ในบรรทัดเดียว

**ใช้ Spread Operator กับ Destructuring**

อีกวิธีที่สร้าง HTML element พร้อม attribute ได้ในบรรทัดเดียว คือใช้ spread operator และ destructuring ของ JavaScript

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

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

ในตัวอย่างนี้ เราเก็บ attribute ไว้ใน object (attributes) แล้วใช้ spread operator (...attributes) เพื่อกำหนด property ตอนสร้าง element วิธีนี้ยืดหยุ่นและทำให้นำชุด attribute เดิมกลับมาใช้กับ element อื่นได้ง่าย หรือจะปรับแต่ง attribute แบบ dynamic ก็ได้  

**ใช้ Custom Function**  
หรือจะสร้างฟังก์ชันไว้ใช้ซ้ำ เพื่อสร้าง element พร้อม attribute ในบรรทัดเดียวก็ได้

```
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() รับ argument สองตัว: ชื่อ tag (เช่น 'a', 'div' ฯลฯ) และ object ที่บรรจุ attribute ที่ต้องการ ฟังก์ชันนี้นำไปใช้ซ้ำได้ทั่วทั้งโค้ด ทำให้โค้ดเป็น module มากขึ้นและแก้ไขได้ง่าย

# สรุป

การตั้งค่า attribute ทีละตัวบน HTML element นั้นกินเวลาและทำให้เกิดโค้ดซ้ำซ้อน การใช้ Object.assign() ช่วยให้คุณสร้าง HTML element พร้อมกำหนด attribute หลายตัวได้ในบรรทัดเดียว ทำให้โค้ดอ่านง่ายและดูแลรักษาง่ายขึ้น นอกจากนี้วิธีอื่น ๆ อย่างการใช้ spread operator หรือ custom function ก็ช่วยให้โค้ดกระชับและมีประสิทธิภาพมากขึ้นเช่นกัน

เมื่อนำเทคนิคเหล่านี้ไปใช้ในโปรเจกต์ JavaScript คุณจะเขียนโค้ดที่สะอาดและดูแลรักษาง่ายขึ้น มีประโยชน์มากโดยเฉพาะในเว็บแอปพลิเคชันที่ซับซ้อนและต้องเน้นประสิทธิภาพ  

---

# คำถามที่พบบ่อย

**1. Object.assign() ใน JavaScript คืออะไร?**  
Object.assign() คือ Method ที่ copy property แบบ enumerable ทั้งหมดจาก source object หนึ่งตัวหรือหลายตัวไปยัง target object นิยมใช้สำหรับ merge object หรือตั้งค่า property บน object แบบกระชับ

**2. สร้าง HTML element พร้อม attribute หลายตัวในบรรทัดเดียวได้ไหม?**  
ได้ ใช้ Object.assign() หรือวิธีคล้าย ๆ กัน ก็สร้าง HTML element พร้อมกำหนด attribute หลายตัวได้ในบรรทัดเดียว

**3. การใช้ Object.assign() ตั้งค่า attribute ของ HTML มีข้อดีอะไรบ้าง?**

การใช้ Object.assign() ทำให้โค้ดสะอาดขึ้น อ่านง่ายขึ้น และดูแลรักษาง่ายขึ้น ลดความจำเป็นในการตั้งค่า attribute ทีละตัว โดยรวมทุกอย่างไว้ในบรรทัดเดียว

**4. ใช้ Object.assign() ร่วมกับฟีเจอร์อื่นของ JavaScript อย่าง spread operator ได้ไหม?**  
ได้แน่นอน! ใช้ Object.assign() คู่กับ spread operator หรือ destructuring ก็ได้ โค้ดจะอ่านง่ายและนำกลับมาใช้ซ้ำได้ดีขึ้นอีก

**5. มีทางเลือกอื่นนอกจาก Object.assign() สำหรับตั้งค่า attribute ในบรรทัดเดียวไหม?**  
ทางเลือกอื่น ๆ ได้แก่ การใช้ spread operator, destructuring หรือการสร้าง custom function ที่ห่อ logic การตั้งค่า attribute ให้กับ element ไว้ข้างใน

---

การ optimize โค้ด JavaScript ด้วย Method อย่าง Object.assign() ช่วยให้การพัฒนามีประสิทธิภาพขึ้นและลดโค้ด boilerplate แนวทางนี้เป็นไปตาม best practice สมัยใหม่ และช่วยให้แอปพลิเคชัน JavaScript scale ได้และดูแลรักษาได้ในระยะยาว

---

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

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