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);
결과화면
'02_STUDY > JavaScript' 카테고리의 다른 글
| [ JavaScript ] 논리연산자(&&, ||)를 활용한 단축평가 (0) | 2023.08.28 |
|---|---|
| [ JavaScript ] Truthy와 Falsy (0) | 2023.08.28 |
| [ JavaScript ] insertBefore()로 원하는 요소 앞에 요소를 추가하기 (0) | 2023.08.04 |
| [ JavaScript ] DOM(Document Object Model) 과 node에 대해서 (0) | 2023.02.12 |
| [ JavaScript ] JS 스크롤 이동하기, scrollBy(현위치, 만큼)와 scrollTo(전체, 까지)의 차이 (0) | 2023.02.11 |
