วิธีสร้างและเพิ่มแอตทริบิวต์ HTML ด้วย JavaScript

เรียนรู้วิธีสร้างและเพิ่มแอตทริบิวต์ HTML ด้วย JavaScript

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

โชคดีที่คุณสามารถสร้างแอตทริบิวต์และแนบไปกับองค์ประกอบปุ่มได้โดยใช้ JavaScript

เราต้องทำ 3 สิ่ง:

• สร้างแอตทริบิวต์ประเภท id
• ให้ค่า (ชื่อ)
• เพิ่มแอตทริบิวต์+ค่าใหม่ให้กับองค์ประกอบปุ่ม

มาร์กอัป HTML

อย่างแรกคือ ปุ่ม HTML ซึ่งน่าเสียดายที่ไม่มีแอตทริบิวต์ ID (buhu) แต่:

<button>Click me!</button>

JavaScript

เลือกปุ่มของคุณโดยใช้ querySelector() :

const button = document.querySelector('button')

หมายเหตุ:

หากเว็บไซต์ของคุณมีปุ่มมากกว่าหนึ่งปุ่ม คุณสามารถระบุตัวเลือกได้เสมอโดยเชื่อมโยงปุ่มนั้น ตัวอย่างเช่น หากปุ่มที่เป็นปัญหาของคุณอยู่ในองค์ประกอบ div ที่มี id หรือแอตทริบิวต์ class ที่ไม่ซ้ำกัน เช่น:

const button = document.querySelector('.service-section button')

อ้างอิงท้ายเรื่อง

ตกลง ตอนนี้เรามาสร้างแอตทริบิวต์ของประเภท id :

const attribute = document.createAttribute('id')

และให้ค่า (ชื่อ):

attribute.value = `js-button-run-function`

ตอนนี้แนบแอตทริบิวต์ที่สร้างขึ้นใหม่กับองค์ประกอบปุ่มของคุณ:

button.setAttributeNode(attribute)

แค่นั้นแหละ!

ตอนนี้ หากคุณพิมพ์ตัวแปรปุ่มของคุณไปยังคอนโซล คุณจะเห็นว่าปุ่มของคุณได้รับการอัปเกรดแล้ว:

console.log(button)

// output: "<button id='js-button-run-function'>Click me</button>"

เยี่ยมมาก ตอนนี้คุณสามารถใช้ JavaScript เพื่อเลือกปุ่มนี้ตามรหัสเฉพาะ และสร้างฟังก์ชันที่จะทำงานเมื่อผู้ใช้คลิกที่ปุ่ม

มายืนยันว่าใช้ได้ผลดี เพิ่มรหัสนี้ในไฟล์ JavaScript ของคุณ:

// Select button via its new id value
const buttonRunFunction = document.querySelector('#js-button-run-function')

// On click show an alert box
buttonRunFunction.addEventListener('click', function() {
	alert('It works!')
})

หากคุณทำทุกอย่างถูกต้อง ตอนนี้คุณควรเห็นช่องแจ้งเตือนว่า “ใช้งานได้!” ปรากฏขึ้นเมื่อคุณคลิกที่ปุ่ม

รหัสทั้งหมด:

const button = document.querySelector('button')
const attribute = document.createAttribute('id')

attribute.value = `js-button-run-function`

// Attach new attribute to the button
button.setAttributeNode(attribute)

// Select button via its id 
const buttonRunFunction = document.querySelector('#js-button-run-function')

// Add click event to the button
buttonRunFunction.addEventListener('click', function() {
	alert('it works!')
})