[책] 자바스크립트 코드 레시피 278 - 128일차

요소 생성하기

• HTML 요소를 동적으로 생성하고 싶을 때
• 모달 윈도우 창을 생성하고 싶을 때

구문

document.createElement('태그명', 옵션)

설명

createElement() 는 인수에 전달된 태그명으로 요소를 생성합니다.

실습

개발자 모드 열어서 생성된 요소를 확인할 수 있습니다.

script.js

// div 요소 생성
const divElement = document.createElement('div');
divElement.innerText = '동적으로 생성한 요소입니다.';
document.body.appendChild(divElement);
divElement.classList.add('class-div');
// a 요소 생성
const anchorElement = document.createElement('a');
document.body.appendChild(anchorElement);
anchorElement.href = 'https://www.naver.com';
anchorElement.innerText = '네이버 이동하기';
anchorElement.classList.add('class-a');