자바스크립트 - insertAdjacentElement() 엘리먼트에서 특정 위치에 노드 삽입

insertAdjacentElement(position, text)

특정 위치에 노드를 추가합니다.

매개변수

position

4가지가 들어갈 수 있습니다

beforebegin	element 앞에
afterbegin	element 안에 가장 첫번째 child
beforeend	element 안에 가장 마지막 child
afterend	element 뒤에

※ afterbegin / beforeend는 꼭 부모가 있어야 합니다.

text

삽입하고 싶은 노드 or xml

 

문법

element.insertAdjacentElement(position, newElement);

예시

<div class ="abc">
  <p>title<p>
</div>​

let title = document.querySelector('.abc');

let beforebegin = document.createElement('p');
beforebegin.innerHTML = 'beforebegin';

let afterbegin = document.createElement('p');
afterbegin.innerText = 'afterbegin';

let beforeend = document.createElement('p');
beforeend.innerText = 'beforeend';

let afterend = document.createElement('p');
afterend.innerText = 'afterend';

title.insertAdjacentElement('beforebegin', beforebegin);
title.insertAdjacentElement('afterbegin', afterbegin);
title.insertAdjacentElement('beforeend', beforeend);
title.insertAdjacentElement('afterend', afterend);

 결과