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

라이브러리가 없는 JavaScript에서 다른 요소 뒤에 요소 삽입

JavaScript에서는 지정된 참조 앞에 요소를 삽입하기 위한 insertBefore() 메서드가 있습니다. 마디. 하지만 jQuery나 다른 라이브러리에 의존하지 않고 다른 요소 뒤에 요소를 삽입하려면 어떻게 해야 할까요?

답변

다음 스니펫이 필요합니다.

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

방법은 다음과 같습니다. 작동:

• referenceNode는 새 노드(newNode)를 삽입하려는 노드를 나타냅니다.
• referenceNode.parentNode는 referenceNode의 상위 노드를 가져옵니다.
• referenceNode.nextSibling은 referenceNode의 다음 형제를 식별합니다. referenceNode가 마지막 자식이면 nextSibling은 null이 됩니다. 이 사례는 하위 목록 끝에 추가되는 insertBefore()에 의해 적절하게 처리됩니다.

예제 코드

이 솔루션을 사용하려면 다음을 수행하세요. 다음 함수를 정의하십시오.

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

그런 다음 이 함수를 다음과 같이 사용할 수 있습니다. so:

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

이 코드는 ID가 "foo"인 div 뒤에 텍스트 "test"가 포함된 범위 요소를 삽입합니다.

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