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

HTML 코드 요소 추가하기

• 동적 표시 요소를 추가하고 싶을 때
• 모달 윈도우 창을 화면에 추가하고 싶을 때

구문

부모요소.insertAdjacentHTML(삽입위치, 문자열)
beforebegin 부모 요소 바로 앞
afterbegin 부모 요소 제일 앞
beforeend 부모 요소 제일 뒤
afterend 부모 요소 바로 뒤

설명

insertAdjacentHTML() 은 첫 번째 인숫값의 위치에 두 번째 인수의 문자열을 HTML(혹은 XML)로 삽입하며, 삽입 위치의 기준 요소는 삭제하지 않는다. 3초 후 .new-box 요소를 추가하는 샘플을 확인합니다.

실습

index.html

<!-- beforebegin 위치 -->
<div class="container">
  <!-- afterbegin 위치 -->
  <div class="box">자식 요소1</div>
  <div class="box">자식 요소2</div>
  <!-- afterend 위치 -->
</div>
<!-- beforeend 위치 -->

---

script.js

const container = document.querySelector('.container');
const newBox = `<div class="new-box">.new-box 요소</div>`;
setTimeout(() => {
  container.insertAdjacentHTML('afterbegin', newBox); // .new-box 요소를 .container 요소 제일 앞에 추가
  container.insertAdjacentHTML('afterend', newBox); // .new-box 요소를 .container 요소 뒤에 추가
}, 3000);