초보자용 js insert 노드appendChild insert사용 전 method_javascript 기술

먼저 정의에서 다음 두 가지 메서드를 이해하세요.
appendChild() 메서드: 노드의 하위 노드 목록 끝에 새 하위 노드를 추가할 수 있습니다. 구문: appendChild(newchild)
insertBefore() 메서드: 기존 하위 노드 앞에 새 하위 노드를 삽입할 수 있습니다. 구문: insertBefore(newchild,refchild)
동일성: 하위 노드 삽입
차이: 구현 원칙과 방법이 다릅니다.
appendChild 메소드는 상위 노드를 기준으로 상위 노드의 하위 노드 끝에 새 노드를 추가합니다.
　insertBefore 메소드는 기존 노드 앞에 (자식 노드를 기준으로) 새 노드를 추가하는 것입니다.
이 간단한 예를 살펴보겠습니다. 마지막에 box-con ID로 하위 노드 div를 추가합니다.

코드 복사 코드는 다음과 같습니다.

1

3

코드 복사 코드는 다음과 같습니다.

window.onload = function() {
var btn = document. getElementById("creatbtn");
btn.onclick = function() {
insertEle();
}
}
function insertEle() {
var oTest = document.getElementById ("box-one"); var newNode = document.createElement("div");
newNode.innerHTML = " 이것은 newcon입니다. "; 🎜>oTeset.insertBefore(newNode,null ); // 두 메소드 모두 구현 가능
}


insertBefore의 첫 번째 매개변수는 새 노드 변수인appendChild와 동일하며, insert의 두 번째 매개변수는 null일 수도 있습니다. 이렇게도 쓸 수 있습니다

코드 복사

코드는 다음과 같습니다. function insertEle () { var oTest = document.getElementById("box-one");

var newNode = document.createElement("div")

var reforeNode = document.getElementById("p1");
newNode.innerHTML = " 이것은 newcon입니다.
oTest.insertBefore(newNode,reforeNode); // ID가 p1인 요소 앞에 삽입됩니다.


또는

코드 복사

코드는 다음과 같습니다. function insertEle( ) { var oTest = document.getElementById("box-one"); var newNode = document.createElement("div")

var reforeNode = document.getElementById("p1"); 🎜>newNode.innerHTML = " This is a newcon ";

oTest.insertBefore(newNode,foreNode.nextSibling);//새로 생성된 요소 노드는 ID가 p1인 노드 요소 앞에 삽입됩니다.
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 는 id가 P1인 노드의 요소 뒤에 삽입됩니다.
}


여기서 제가 말하고 싶은 것은 nextSibling입니다. 즉, 동일한 트리 수준에서 요소 바로 뒤에 오는 요소입니다.

reforeNode.nextSibling: beforeNode 객체 바로 다음에 오는 노드를 얻습니다.

previousSibling - 노드의 이전 형제 노드를 가져옵니다

insertBefore() 메소드의 특징은 기존 자식 노드 앞에 새 노드를 삽입하는 것이라고 볼 수 있지만, 두 가지 상황을 결합하면 insertBefore() 메소드가 하위 노드 목록의 임의 위치에 노드를 삽입하는 것으로 나타났습니다.

헤헤헤. . . 일부 메소드는 정의된 특성에 따라 작동할 뿐만 아니라 문법을 준수하는 한 일부 속성을 결합할 때 항상 예상치 못한 이점이 있습니다.

아직은 아는 것이 별로 없고, 이해가 얕을 수도 있고, 제가 본 내용이 도움이 되기를 바랍니다. . 여기에 모든 내용을 기록하고 모든 사람의 제안을 흡수하여 성장을 촉진할 수 있기를 바랍니다. . .

성명：

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