insertAdjacentHTML() 메서드

insertAdjacentHTML - HTML 인접(adjacent)요소에 삽입하기

이 메서드를 사용하면 시작 태그의 앞, 시작 태그의 뒤, 종료 태그 앞, 종료 태그 뒤에 노드를 삽입하는 것이 가능합니다.

다음의 코드에서는 insertAdjacentHTML() 메서드를 사용해서 구성한 코드입니다.

html

<i id="elm">how</i>

javascript

var elm = document.getElementById('elm');
elm.insertAdjacentHTML('beforebegin', 'Hey-'); // 타켓 요소 전(형제레벨)에 생성- 시작 태그의 앞(형제 레벨로)
elm.insertAdjacentHTML('afterbegin', 'jaehee-'); // 타켓 요소 다음(자식요소)에 생성 - 시작 태그의 뒤(자식 요소로)
elm.insertAdjacentHTML('beforeend','-are'); // 타켓 요소 끝나는 태그 바로 직전(자식요소로)에 요소를 생성 - 종료 태그 앞(자식 요소로)
elm.insertAdjacentHTML('afterend','-you?'); // 타켓 요소의 끝나는 태그 바로 다음(형제레벨)에 요소를 생성 - 종료 태그 뒤(형제 레벨로)

console.log(document.body.innerHTML);
/**
 * 다음과 같이 기록된다.
 * Hey-jaehee-how-are-you?
 */

insertAdjacentHTML 의 beforebegin 및 affterend 옵션은 노드가 DOM 트리 내에 존재하고 부모요소를 가진 경우에만 동작합니다.

Jaehee's WebClub