02_STUDY/JavaScript
[ JavaScript ] insertBefore()보다 더 편리하게 쓸 수 있는 insertAdjacentElement(), 특정 위치에 요소 추가하기
zestlumen
2023. 8. 4. 03:49
insertAdjacentElement()
DOM요소에 새로운 요소를 특정 위치에 추가하는 기능을 제공하는 메서드.
( * 'adjacent: 인접한'이란 뜻으로 아마 인접한 위치에 요소를 추가하기에 )
element.insertAdjacentElement(position, newElement);
element 기준이 되는 요소
position 새로운 요소를 추가할 위치를 지정하는 문자열
- beforebegin 요소 바로 앞에 추가
- afterbegin 요소의 첫 번째 자식으로 추가
- beforeend 요소의 마지막 자식으로 추가
- afterend 요소의 바로 뒤에 추가
newElement 추가할 새로운 DOM 요소
insertAdjacentElement()는
전에 많이 사용했던 insertBefore()보다 다양한 위치에서 요소를 추가할 수 있고
HTML문자열 또는 기존의 DOM요소를 파싱하지 않고도 요소를 추가할 수 있다.
(참고로 insertBefore()도 DOM트리를 다시 파싱하지 않음)
코드가 조금 더 간단하고 직관적이다.
그렇지만 ES6 기능이므로 브라우저 호환성을 생각해서 사용해야 한다.
HTML
<body>
<div id="standard">
기준이 되는 요소
</div>
</body>
JS
//기준 노드 가져오기
const standard = document.getElementById('standard');
//새로운 요소 생성
const title = document.createElement('h2');
title.textContent = "제목";
const newDiv = document.createElement('div');
newDiv.textContent = "뒤에 추가된 요소";
//요소 바로 앞에 추가
standard.insertAdjacentElement('beforebegin', title);
//요소 바로 뒤에 추가
standard.insertAdjacentElement('afterend', newDiv);
결과화면
