Node.insertBefore() 특정 위치에 노드를 삽입

insertBefore()

참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입한다.

 

만약 주어진 자식 노드가 document에 존재하는 노드를 참조한다면, insertBefore()insertBefore()가 자식 노드를 현재 위치에서 새로운 위치로 옮긴다.

(노드를 다른 노드에 추가하기 전에 상위 노드에서 제거할 필요가 없음)

 

문법

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

referenceNode 가 null이라면, newNode가 자식 노드의 리스트의 끝에 삽입된다.

 

예시

<div id="parent">
   <span class="child_1"></span>
   <span class="child_2"></span>
   <span class="child_3"></span>
   <span class="ele"></span>
</div>

let parent = document.querySelector('#parent');
let ele = document.querySelector('.ele');

let child1 = document.querySelector('.child_1');
let child2 = document.querySelector('.child_2');
let child3 = document.querySelector('.child_3');

 

제일 앞에 삽입

parent.insertBefore(ele, parent.firstChild);

 

두 번째 위치에 삽입

parent.insertBefore(ele, child2);

 

세 번째 위치에 삽입

parent.insertBefore(ele, child3);

 

제일 뒤에 삽입

parent.insertBefore(ele, null);