자바스크립트에서 형제 노드를 만드는 방법

JavaScript는 프런트 엔드 개발에 일반적으로 사용되는 프로그래밍 언어로 HTML 요소 및 기타 DOM 작업을 생성, 수정, 삭제할 수 있습니다. HTML 문서에서 형제 노드는 동일한 상위 노드 아래의 모든 하위 노드를 나타냅니다. 때로는 웹 페이지에서 동적 효과나 대화형 기능을 구현하기 위해 JavaScript를 통해 새로운 형제 노드를 만들어야 할 때도 있습니다.

형제 노드를 생성하려면 JavaScript를 통해 HTML 문서의 DOM 요소를 작동해야 합니다. DOM(문서 개체 모델)은 HTML 문서를 트리 구조로 변환하여 JavaScript를 사용하여 DOM 요소에 액세스하고 조작할 수 있습니다.

아래에서는 JavaScript를 사용하여 형제 노드를 만드는 방법을 여러 사례를 통해 보여 드리겠습니다.

1. 형제 요소 앞에 새 요소 삽입

insertBefore() 메서드를 사용하여 형제 요소 앞에 새 요소를 추가할 수 있습니다. 다음은 샘플 코드입니다.

// 获取参考节点
var refNode = document.getElementById("ref-node");

// 创建新节点
var newNode = document.createElement("div");
newNode.innerHTML = "新节点";

// 在参考节点的父级节点中插入新节点
refNode.parentNode.insertBefore(newNode, refNode);

이 예제에서는 먼저 getElementById() 메서드를 사용하여 참조 노드(즉, 형제 노드를 생성하는 요소)를 얻은 다음 createElement() 메서드를 사용하여 div를 생성합니다. 요소 노드를 만들고 해당 innerHTML 속성을 " New Node"로 설정합니다. 마지막으로 insertBefore() 메소드를 사용하여 참조 노드의 상위 노드에 새 노드를 삽입하고 참조 노드의 이전 형제 노드가 됩니다.

2. 형제 요소 뒤에 새 요소 삽입

형제 요소 뒤에 새 노드를 추가해야 하는 경우 먼저 형제 요소의 다음 형제 노드를 가져온 다음 그 앞에 새 노드를 삽입할 수 있습니다. . 다음은 샘플 코드입니다.

// 获取参考节点
var refNode = document.getElementById("ref-node");

// 创建新节点
var newNode = document.createElement("div");
newNode.innerHTML = "新节点";

// 获取参考节点的下一个兄弟节点
var nextNode = refNode.nextSibling;

// 在参考节点的父级节点中插入新节点
refNode.parentNode.insertBefore(newNode, nextNode);

이 예에서는 먼저 getElementById() 메서드를 사용하여 참조 노드를 얻은 다음 div 요소 노드를 만들고 해당 innerHTML 속성을 "new node"로 설정합니다. 그런 다음 nextSibling 속성을 사용하여 참조 노드의 다음 형제 노드를 얻습니다. 마지막으로 참조 노드의 부모 노드에서 insertBefore() 메서드를 사용하여 참조 노드의 후속 형제 노드 앞에 새 노드를 삽입합니다.

3. 태그 안에 새 요소 삽입

기존 태그 안에 노드를 추가하려면appendChild() 메서드를 사용할 수 있습니다. 다음은 샘플 코드입니다.

// 获取参考节点
var refNode = document.getElementById("ref-node");

// 创建新节点
var newNode = document.createElement("span");
newNode.innerHTML = "新节点";

// 将新节点添加到参考节点的内部
refNode.appendChild(newNode);

이 예에서는 먼저 getElementById() 메서드를 사용하여 참조 노드를 얻은 다음 범위 요소 노드를 만들고 해당 innerHTML 속성을 "new node"로 설정합니다. 마지막으로 참조 노드 내부의appendChild() 메서드를 사용하여 레이블에 새 노드를 추가합니다.

요약

JavaScript에서는 DOM 요소를 조작하여 HTML 요소 및 기타 DOM 작업을 생성, 수정, 삭제할 수 있습니다. 가장 일반적인 작업 중 하나는 새로운 형제 노드를 만드는 것입니다. 이 기사에서는 형제 요소 앞에 새 요소를 삽입하는 방법, 형제 요소 뒤에 새 요소를 삽입하는 방법, 태그 안에 새 요소를 삽입하는 방법 등 JavaScript를 통해 형제 노드를 만드는 세 가지 방법을 소개합니다. 실제 상황에 따라 웹 페이지에서 동적 효과나 대화형 기능을 달성하기 위해 다양한 방법을 선택할 수 있습니다.

위 내용은 자바스크립트에서 형제 노드를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!