วิธีสร้างแท็ก img ใหม่ด้วย jQuery พร้อม src และ id จาก JavaScript Object

บทนำ

jQuery มีหลายวิธีในการสร้าง element <img> ใหม่แบบไดนามิก พร้อมกำหนด attribute ต่างๆ

วิธีที่ 1: สร้างจาก HTML String

var myImg = $('');
$(document.createElement(myImg)); // ไม่จำเป็น ตรงนี้ผิด
myImg.attr('src', responseObject.imgurl);

หมายเหตุ: โค้ดต้นฉบับมีบางส่วนที่ไม่ถูกต้อง ให้ใช้วิธีด้านล่างแทน

วิธีที่ 2: Object Syntax (แนะนำ) ✅

var myImg = $('', {
  id: 'id1',
  src: 'exampleimg.png',
  alt: 'Alt text',
  class: 'my-image-class',
  title: 'Tooltip text'
});

// เพิ่มเข้า DOM
$('#container').append(myImg);

วิธีที่ 3: แยกสร้างและตั้งค่า

var myImg = $('');
myImg.attr({
  id: 'dynamic-img',
  src: responseObject.imgurl,
  alt: 'Dynamic Image'
});
$('body').append(myImg);

วิธีที่ 4: Vanilla JavaScript (ไม่ใช้ jQuery)

// สร้าง element
var img = document.createElement('img');
img.id = 'dynamic-img';
img.src = responseObject.imgurl;
img.alt = 'Dynamic Image';
img.className = 'my-class';

// เพิ่มเข้า DOM
document.getElementById('container').appendChild(img);

การจัดการ Event

// jQuery
myImg.on('load', function() {
  console.log('Image loaded');
}).on('error', function() {
  console.log('Image failed to load');
});

// Vanilla JS
img.addEventListener('load', function() {
  console.log('Image loaded');
});
img.addEventListener('error', function() {
  console.log('Image failed to load');
});

ตัวอย่างสมบูรณ์กับ Response Object

var responseObject = {
  imgurl: 'https://example.com/image.jpg',
  id: 'img-001',
  alt: 'Product Image'
};

// jQuery
var $img = $('', {
  id: responseObject.id,
  src: responseObject.imgurl,
  alt: responseObject.alt
});
$('#gallery').append($img);

Best Practices

• ใช้ Object syntax สำหรับตั้งค่าหลาย attribute พร้อมกัน
• ระบุ alt เสมอสำหรับ accessibility
• จัดการ error event สำหรับรูปโหลดไม่สำเร็จ
• พิจารณาใช้ Vanilla JS หากไม่ต้องการ dependency