JavaScript에서 다른 요소 뒤에 요소를 삽입하는 방법은 무엇입니까?

JavaScript에서 다른 요소 뒤에 요소 삽입

기존 노드 뒤에 요소를 삽입하는 것은 JavaScript에서 일반적인 작업입니다. 그러나 insertBefore() 메서드가 있지만 참조 노드 앞에만 요소를 추가할 수 있습니다. 뒤에 요소를 삽입하려면 대체 접근 방식이 필요합니다.

라이브러리가 없는 솔루션

라이브러리를 사용하지 않고 요소를 차례로 삽입하려면 다음 코드를 사용할 수 있습니다.

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

다음은 Breakdown:

• referenceNode: 새 노드를 삽입하려는 요소.
• parentNode: referenceNode의 상위 요소.
• nextSibling: 다음 형제 referenceNode의 경우, referenceNode가 마지막인 경우 null이 됩니다. child.

referenceNode가 마지막 하위이면 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"가 포함된 새 범위 요소가 생성되고 ID가 "foo"인 div 요소 뒤에 삽입됩니다.

위 내용은 JavaScript에서 다른 요소 뒤에 요소를 삽입하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!