라이브러리를 사용하지 않고 JavaScript에서 다른 요소 뒤에 요소를 삽입하는 방법

질문 : 라이브러리를 사용하지 않고 JavaScript에서 다른 요소 뒤에 요소를 삽입하는 방법은 무엇입니까?

---

JavaScript에는 insertBefore() 가 있지만 jQuery 또는 다른 라이브러리를 사용하지 않고 다른 요소 뒤에 요소를 삽입하려면 어떻게해야합니까?

답변

---

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

referenceNode newNode 를 배치하려는 노드입니다. referenceNode 가 부모 요소 내의 마지막 자식이면 referenceNode.nextSibling 은 null 되고 insertBefore 는 목록 끝에 추가하여 해당 사례를 처리하기 때문입니다.

그래서:

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

다음 스 니펫을 사용하여 테스트 할 수 있습니다.

 

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

var el = document.createElement("span");
el.innerHTML = "test";
var div = document.getElementById("foo");
insertAfter(div, el);

<div id="foo">Hello</div>

출처 : https://stackoverflow.com/questions/4793604/how-to-insert-an-element-after-another-element-in-javascript-without-using-a-lib