기존 노드 다음에 새 노드를 하위 노드로 삽입하려면 다음 방법을 사용할 수 있다.

1. 먼저 기존 노드의 다음 형제 노드를 선택한다.
2. 그런 다음 기존 노드의 부모 노드를 선택하고 부모 노드에서 메서드를 호출하여 바로 형제 노드 앞에 새 노드를 삽입한다.

함수

function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}

다음과 같은 항목이 있다고 가정해보자.

<ul id="menu">
    <li>Home</li>   
    <li>About</li>
    <li>Contact</li>
</ul>

사용법

하단 소스처럼 사용한다.

let menu = document.getElementById('menu');
// li 노드 생성
let li = document.createElement('li');
li.textContent = 'Services';

// 마지막 엘리먼트 다음에 li 추가하기
insertAfter(li,  menu.lastElementChild);

결과

<ul id="menu">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
    <li>Services</li>
</ul>