[JavaScript] 자바스크립트에서 요소 생성하기

141_자바스크립트에서 요소 생성하기

[적용]

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

---

[문법]

메소드	의미	반환
docu,memt.createElement('태그염', 옵션)	태그명 요소를 생성	요소

---

[내용]

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

// div  요소 생성
const divElement = document.createElement('div');
// a 요소 생성
const anchorElement = document.createElemen('a');

 

createElement()를 생성해도 화면에는 아무런 변화가 없으며,

appendChild() 등을 사용해 요소를 추가해야 DOM 요소로 사용할 수 있다.

또한, innerHTML 속성으로 HTML을 추가하거나 classList 속성으로 클래스를 조작할 수 있다.

// div 요소 생성
xonst divElement = document.createElement('div');
// innerHTML로 내용 생성
divElement.innerHTML = '동적으로 생성한 요소입니다.';
// body 요소 끝에 추가
document.body.appendChild(divElement);

 

---

[예시]

버튼 클릭 시 모달(Modal) 윈도우 창을 표시하는 샘플을 확인해 보자.

 

HTML                                                                                                                                                              index.html

<button id="create-modal-button">모달 윈도우 창 생성</button>

CSS                                                                                                                                                                      style.css

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  ...생략...
}

.modal .inner {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  ...생략...
}

JavaScript                                                                                                                                                          main.js

// create-modal-button 클릭 시 처리
document
  .querySelector('#create-modal-button')
  .addEventListener('click', displayModalWindow);
  
/** 모달 윈도우 창 표시 */
function displayModalWondow() {
  // 모달 윈도우 창 생성
  const modalElement = document.createElement('div');
  // modal 클래스 부여
  modalElement.classList.add('modal');
  
  // 모달 윈도우 내부 요소 생성
  const innerElement = document.createElement('div');
  innerElement.classList.add('inner');
  innerElement.innerHTML = `
    <p>모달 윈도우 내용</p>
    <div class="character"></div>
  `;
  // 모달 윈도우 내부 요소 배치
  modalElement.appendChild(innerElement);
  // body 요소에 모달 윈도우 배치
  document.body.appendChild(modalElement);
  // 내부 요소 클릭 시 모달 윈도우 삭제 처리
  innerElement.addEventListener('click', () => {
    closeModalWidow(modalElement);
  });
}

/** 모달 윈도우 닫기 */
function closeModalWindow(,odalElement) {
  document.body.removeChild(modalElement);
}

 

실행결과

 버튼 클릭 시 모달 윈도우 창이 표시된다.

윈도우 창 클릭 시에는 화면이 닫힌다.

 

속성을 생성하는 createAttribute()나 주석을 생성하는 createComment()도 사용할 수 있다.

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김