[JavaScript] 자바스크립트 HTML 코드 요소 추가하기

138_자바스크립트 HTML 코드 요소 추가하기

[적용]

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

---

[문법1]

메소드	의미	반환
부모요소.insertAdjacentHTML(삽입위치,문자열)	문자열을 HTML로 삽입	요소(Element)

[문법2]

삽입 위치	의미
'beforebegin'	부모 요소 바로 앞
'afterbegin'	부모 요소 제일 앞
'beforeend'	부모 요소 제일 뒤
'afterend'	무오 요소 바로 뒤

---

[내용]

insertAdjacentHTML()은 첫 번째 인수값의 위치에 두 번째 인수의 문자열을 HTML(혹은 XML)로 삽입하며,

삽입 위치의 기존 요소는 삭제하지 않는다.

3초후 .new-box 요소를 추가하는 예시를 확인해 보자.

 

HTML                                                                                                                                                              index.html

<div class="container">
  <div class="box">자식 요소1</div>
  <div class="box">자식 요소2</div>
</div>

JavaScript                                                                                                                                                          main.js

const container = document.querySelector('.container');
// 삽입하는 .new-box 요소
const newBox = `<div class="new-box box">.new-box 요소</div>`;

setTimeout(() => {
  // .new-box 요소를 .container 요소 제일 앞에 추가
  container.insertAdjacentHTML('afterbegin', newBox);
  // .new-box 요소를 .container 요소 뒤에 추가
  container.insertAdjacentHTML('afterend', newBox);
}, 3000);

 

실행결과

.container 요소에 insertAdjacentHTML()을 사용하면 삽입 위치는 다음과 같다.

<!-- beforebegin 위치-->
<div class="container">
  <!-- afterbegin 위치 -->
  <div class="box"></div>
  <div class="box"></div>
  <!-- afterend 위치 -->
</div>
<!-- beforeend 위치 -->

insertAdjacentElement()도 유사한 기능을 가진다.

---

 

 

 

 

 

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