JavaScript로 HTML 속성을 만들고 추가하는 방법

JavaScript로 HTML 속성을 만들고 추가하는 방법을 알아보세요.

웹사이트에 클릭할 때 기능을 실행해야 하는 버튼이 있다고 가정해 보겠습니다. 불행히도 누군가가 버튼에 ID 또는 클래스 값을 추가하는 것을 잊었고 현재 HTML 마크업에 직접 액세스할 수 없습니다.

다행히 JavaScript를 사용하여 속성을 생성하고 버튼 요소에 첨부할 수 있습니다.

3가지 작업을 수행해야 합니다.

• id 유형의 속성 생성
• 값(이름) 지정
• 버튼 요소에 새 속성+값 추가

HTML 마크업

첫째, 슬프게도 ID 속성(buhu)이 아직 없는 HTML 버튼입니다.

<button>Click me!</button>

자바스크립트

querySelector()를 사용하여 버튼을 선택합니다. :

const button = document.querySelector('button')

참고:

웹사이트에 버튼이 두 개 이상 있는 경우 선택기를 연결하여 항상 지정할 수 있습니다. 예를 들어, 문제의 버튼이 고유 ID 또는 클래스 속성을 가진 div 요소 내부에 있는 경우(예:

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를 사용하여 고유 ID를 기반으로 이 버튼을 선택하고 사용자가 버튼을 클릭할 때 실행되는 기능을 만들 수 있습니다.

좋은 측정을 위해 작동하는지 확인합시다. 다음 코드를 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!')
})