자바스크립트 - insertBefore() 특정 위치에 앞에 노드 삽입

insertBefore()

부모노드의 기준 점 노드 앞에 삽입 할 노드를 삽입합니다.

내가 원하는 위치에 삽입 할 수 있습니다.

문법

부모노드.insertBefore(삽입 할 노드, 기준 점 노드);

기존 부모 노드에서도 굳이 삭제 할 필요 없이 자동으로 이동하게 됩니다.

ex) 부모노드 1번에 위치하고 있을 때, 3번으로 옮기고 싶을 때 삭제하고 옮기지 않아도 됩니다.

 

노드는 자동적으로 기존 노드에서 삭제되고, 새로운 부모 밑에 삽입됩니다

기준 점 노드를 null로 하게 되면, 자식 노드의 끝에 삽입 됩니다.

반환값

 삽입 된 노드

예시

<ul class = "parent">
  <li class="newEle">+</li>
  <li class="ele">button</li>
  <li class="ele">button</li>
  <li class="ele">button</li>
  <li class="ele">button</li>
</ul>

const ele = document.querySelector('.newEle');
const parent = document.querySelector('.parent');
  
parent.insertBefore(ele, null); //맨 끝에 삽입
parent.insertBefore(ele, parent.firstChild); //맨 앞에 삽입

 

insertAfter()

자바스크립트에서는 insertAfter 메서드가 따로 없습니다.

하지만, insertBefore를 이용해서 특정 엘리먼트 뒤에 노드를 삽입 할 수 있습니다.

 

nextSibling은 노드의 다음 element를 가져옵니다.

다음 형제 element에 insertBefore를 이용해서 노드를 삽입하면 insertAfter 처럼 사용할 수 있습니다.

 

뒤에 형제 element 없으면 appendChild를 이용해서 노드를 삽입하면 됩니다.

var newElement = document.createElement('div');
newElement.textContent = '새로운 요소';

var targetElement = document.getElementById('target');
var parentElement = targetElement.parentNode;

if (targetElement.nextSibling) {
   parentElement.insertBefore(newElement, targetElement.nextSibling);
} else {
   parentElement.appendChild(newElement)
}