JavaScript를 사용해 HTML 속성을 만들고 요소에 추가하는 방법을 알아보세요.
웹사이트에 클릭하면 특정 함수를 실행해야 하는 버튼이 있다고 가정해 보겠습니다. 그런데 누군가 버튼에 id나 class 값을 추가하는 것을 깜빡했고, 지금은 HTML 마크업에 직접 접근할 수 없는 상황입니다.
다행히도 JavaScript를 활용하면 속성을 새로 생성해서 버튼 요소에 바로 붙일 수 있습니다.
이 작업에는 다음 3단계가 필요합니다.
id타입의 속성 생성하기- 속성에 값(이름) 지정하기
- 새로운 속성과 값을 버튼 요소에 추가하기
HTML 마크업
먼저 안타깝게도 아직 id 속성이 없는 HTML 버튼입니다.
<button>Click me!</button>JavaScript
querySelector()를 사용해 버튼을 선택합니다.
const button = document.querySelector('button')참고: 웹사이트에 버튼이 여러 개라면 선택자를 조합해서 더 구체적으로 지정할 수 있습니다. 예를 들어 해당 버튼이 고유한 id 또는 class 속성을 가진 div 요소 내부에 있다면 다음과 같이 작성합니다.
const button = document.querySelector('.service-section button')자, 이제 id 타입의 속성을 만들어 보겠습니다.
const attribute = document.createAttribute('id')그리고 속성에 값(이름)을 지정합니다.
attribute.value = `js-button-run-function`이제 새로 만든 속성을 버튼 요소에 연결합니다.
button.setAttributeNode(attribute)이걸로 끝입니다!
이제 button 변수를 콘솔에 출력해 보면 버튼이 업그레이드된 모습을 확인할 수 있습니다.
console.log(button)
// 출력 결과: "<button id='js-button-run-function'>Click me</button>"훌륭합니다! 이제 JavaScript로 이 버튼을 고유한 ID 기준으로 선택할 수 있고, 사용자가 클릭했을 때 실행될 함수도 만들 수 있습니다.
확실하게 하기 위해 실제로 작동하는지도 확인해 보겠습니다. JavaScript 파일에 아래 코드를 추가하세요.
// 새로운 id 값으로 버튼 선택
const buttonRunFunction = document.querySelector('#js-button-run-function')
// 클릭 시 알림창 표시
buttonRunFunction.addEventListener('click', function() {
alert('It works!')
})모든 과정을 올바르게 따라 했다면, 버튼을 클릭할 때마다 "It works!"라는 문구가 담긴 알림창이 뜨는 것을 확인할 수 있습니다.
전체 코드 정리
const button = document.querySelector('button')
const attribute = document.createAttribute('id')
attribute.value = `js-button-run-function`
// 새 속성을 버튼에 연결
button.setAttributeNode(attribute)
// id로 버튼 선택
const buttonRunFunction = document.querySelector('#js-button-run-function')
// 버튼에 클릭 이벤트 추가
buttonRunFunction.addEventListener('click', function() {
alert('it works!')
})