HTML 요소 생성과 속성 설정

웹 페이지에 새로운 요소를 추가하거나 기존 요소의 속성을 설정하려면 어떻게 해야 할까요?

이를 위한 도구로 document.createElement()와 Element.setAttribute() 메서드가 있습니다.

document.createElement 메서드는 새로운 HTML 요소를 생성합니다.

아래 예시의 "Button"처럼 괄호 안에 요소의 이름을 문자열로 전달하면 그에 해당하는 요소가 만들어집니다.

복사
const newButton = document.createElement('Button');
newButton.textContent = '클릭해보세요!';

document.body.appendChild(newButton); // 웹 페이지에 버튼 추가

Element.setAttribute 메서드는 요소에 새로운 속성을 설정하거나 기존 속성의 값을 변경합니다.

setAttribute가 적용되는 대상은 document가 아닌, 하나의 HTML 요소입니다.

setAttribute의 첫 번째 인자로 속성의 이름(Name)을, 두 번째 인자로 속성의 값(Value)을 전달합니다.

복사
const newButton = document.createElement('Button');

newButton.setAttribute('id', 'specialButton'); // id 속성 설정
newButton.setAttribute('class', 'bigButton'); // class 속성 설정

// 버튼은 id="specialButton"과 class="bigButton" 속성을 가짐