라이브러리를 사용하지 않고 JavaScript에서 요소를 다른 요소 뒤에 삽입하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

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

Mary-Kate Olsen

풀어 주다： 2024-12-14 09:30:11

원래의

1003명이 탐색했습니다.

How to Insert an Element After Another in JavaScript Without Using Libraries?

외부 라이브러리 없이 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!