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

외부 라이브러리 없이 JavaScript에 요소를 차례로 삽입

JavaScript 영역에서 프로그래머는 종종 DOM 내의 요소를 조작하려고 합니다. jQuery 및 기타 라이브러리는 이러한 작업을 단순화하지만 외부 종속성에 의존하지 않고 요소 삽입을 달성하는 것이 가능합니다.

질문:

다른 요소 뒤에 요소를 삽입하려면 어떻게 해야 합니까? 다음과 같은 라이브러리의 도움 없이 JavaScript로 jQuery?

답변:

기존 노드 뒤에 요소를 삽입하기 위해 JavaScript는 insertBefore() 메서드를 제공합니다. 그러나 참조 노드 앞에 삽입하는 insertBefore()의 기본 목적과 달리 이를 활용하여 목표를 달성할 수 있습니다.

다음 스니펫은 방법을 보여줍니다.

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

여기서:

• referenceNode는 새 요소를 삽입하려는 요소를 나타냅니다. element
• parentNode는 참조 노드의 상위 요소를 검색합니다.
• nextSibling은 참조 노드 바로 뒤의 요소를 참조합니다. 참조 노드가 마지막 자식인 경우 nextSibling은 null이 되며 insertBefore()는 목록 끝에 추가하여 이 경우를 처리합니다.

예제 함수:

이것을 캡슐화하기 위해 간결한 함수를 만들 수 있습니다. 작업:

function insertAfter(referenceNode, newNode) {
  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);

이 코드 test