우리는appendChild와 insertBefore 둘 다 노드를 삽입하는 기능을 가지고 있다는 것을 알고 있습니다. 그러나 적용에는 여전히 둘 사이에 약간의 차이가 있습니다.
예를 들어, 다음 div에 하위 노드 P를 삽입하려는 경우:
<div id="test"><p id="x1">노드</p><p>노드</p></div>
다음과 같이 작성할 수 있습니다(특정 상황을 테스트할 때 다른 설명을 추가해 주세요).
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "이것은 테스트입니다";
//여기서부터 테스트 시작
//appendChild 메소드:
oTest.appendChild(newNode);
//insertBefore 메소드:
oTest.insertBefore(newNode,null);
</script>
위의 코드를 통해 노드 div 아래에 새 노드가 생성되고 이 노드가 div의 마지막 노드임을 테스트할 수 있습니다. (DOM을 보려면 IE는 IE 개발자 도구 모음 플러그인을 통해 볼 수 있고, Firefox는 Firebug를 사용할 수 있습니다)
분명히 이 예제를 통해 우리는 AppendChildhild와 insertBefore 모두 노드를 삽입할 수 있다는 것을 알 수 있습니다.
위의 예에는 다음과 같은 코드가 있습니다: oTest.insertBefore(newNode,null) 여기서 insertBefore에는 설정할 수 있는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는appendChild와 동일하지만 두 번째 매개변수는 고유합니다. null일 수 있을 뿐만 아니라 다음과 같을 수도 있습니다.
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "이것은 테스트입니다";
oTest.insertBefore(newNode,refChild);
</script>
이 예에서는 x1 노드 앞에 새 노드를 삽입합니다.
또는:
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "이것은 테스트입니다";
oTest.insertBefore(newNode,refChild.nextSibling);
</script>
이 예에서는 x1 노드의 다음 노드 앞에 새 노드를 삽입합니다.
다음 제품에도 사용 가능:
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "이것은 테스트입니다";
oTest.insertBefore(newNode,oTest.childNodes[0]);
</script>
이 예에서는 첫 번째 하위 노드 앞에 새 노드를 삽입합니다. childNodes[0,1,...]를 변경하여 다른 위치에 새 노드를 삽입할 수도 있습니다.
insertBefore() 메서드는 기존 자식 노드 앞에 새 노드를 삽입하는 것임을 알 수 있지만, 예제 1에서는 insertBefore() 메서드를 사용하여 자식 노드 끝에 새 노드를 삽입할 수도 있습니다. 노드 목록. 두 가지 상황을 결합하면 insertBefore() 메소드가 하위 노드 목록의 임의 위치에 노드를 삽입할 수 있음을 알 수 있습니다.
다음 예에서:
appendChild() 메서드는 노드의 하위 노드 목록 끝에 새 하위 노드를 추가합니다.
insertBefore() 메소드는 노드의 하위 노드 목록의 임의의 위치에 새 노드를 삽입합니다.