Computer >> Máy Tính >  >> Lập trình >> HTML

Cách tạo và thêm thuộc tính HTML bằng JavaScript

Tìm hiểu cách tạo và thêm thuộc tính HTML bằng JavaScript.

Giả sử bạn có một nút trên trang web của mình để thực thi một chức năng khi bạn nhấp vào nó. Rất tiếc, ai đó đã quên thêm ID hoặc giá trị lớp vào nút và bạn không có quyền truy cập trực tiếp vào đánh dấu HTML ngay bây giờ.

May mắn thay, bạn có thể chỉ cần tạo một thuộc tính và đính kèm nó vào phần tử nút của mình bằng cách sử dụng JavaScript.

Chúng ta cần làm 3 việc:

  • Tạo một thuộc tính của loại id
  • Đặt cho nó một giá trị (tên)
  • Thêm thuộc tính + giá trị mới vào phần tử nút

Đánh dấu HTML

Đầu tiên, nút HTML, đáng tiếc là nút này chưa có thuộc tính ID (buhu):

<button>Click me!</button>

JavaScript

Chọn nút của bạn bằng cách sử dụng querySelector() :

const button = document.querySelector('button')

Lưu ý:

Nếu trang web của bạn có nhiều nút, bạn luôn có thể chỉ định bộ chọn bằng cách xâu chuỗi nó. Ví dụ:nếu nút được đề cập của bạn nằm bên trong phần tử div có thuộc tính lớp hoặc id duy nhất, ví dụ:

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

Chú thích.

Được rồi, bây giờ chúng ta hãy tạo một thuộc tính của loại id :

const attribute = document.createAttribute('id')

Và cung cấp cho nó một giá trị (tên):

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

Bây giờ, hãy đính kèm thuộc tính mới tạo của bạn vào phần tử nút của bạn:

button.setAttributeNode(attribute)

Đó là nó!

Bây giờ, nếu bạn in biến nút của mình vào bảng điều khiển, bạn có thể thấy rằng nút của bạn đã được nâng cấp:

console.log(button)

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

Tuyệt vời, bây giờ bạn có thể sử dụng JavaScript để chọn nút này dựa trên ID duy nhất của nó và tạo một hàm sẽ chạy khi người dùng nhấp vào nút.

Để có biện pháp tốt, hãy xác nhận rằng nó hoạt động. Thêm mã này vào tệp JavaScript của bạn:

// 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!')
})

Nếu bạn đã làm đúng mọi thứ, bây giờ bạn sẽ thấy một hộp cảnh báo cho biết “Nó hoạt động!” bật lên khi bạn nhấp vào nút.

Tất cả mã:

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!')
})