라이브러리를 사용하지 않고 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

다음의 요소 ID가 "foo"인 요소.

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

JavaScript jquery NULL if while using function dom this Other

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.