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" 속성을 가짐
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!