Guidelines
Practice
HTML 요소 생성과 속성 설정
웹 페이지에 새로운 요소를 추가하거나 기존 요소의 속성을 설정하려면 어떻게 해야 할까요?
이를 위한 도구로 document.createElement()
와 Element.setAttribute()
메서드가 있습니다.
document.createElement("Button")
document
.createElement 메서드는 새로운 HTML 요소를 생성합니다.
아래 예시의 "Button"
처럼 괄호 안에 요소의 이름을 문자열로 전달하면 그에 해당하는 요소가 만들어집니다.
HTML 요소 생성하기
const newButton = document.createElement('Button'); newButton.textContent = '클릭해보세요!'; document.body.appendChild(newButton); // 웹 페이지에 버튼 추가
Element.setAttribute(name, value)
Element
.setAttribute 메서드는 요소에 새로운 속성을 설정하거나 기존 속성의 값을 변경합니다.
setAttribute가 적용되는 대상은 document가 아닌, 하나의 HTML 요소입니다.
setAttribute의 첫 번째 인자로 속성의 이름(Name)을, 두 번째 인자로 속성의 값(Value)을 전달합니다.
HTML 요소에 속성 설정하기
const newButton = document.createElement('Button'); newButton.setAttribute('id', 'specialButton'); // id 속성 설정 newButton.setAttribute('class', 'bigButton'); // class 속성 설정 // 버튼은 id="specialButton"과 class="bigButton" 속성을 가짐
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help