js AppendChild와 insertBefore Usage_javascript 기술의 상세 비교

appendChild와 insertBefore 둘 다 노드를 삽입하는 기능이 있다는 것을 알고 있습니다. 그러나 적용에는 여전히 둘 사이에 약간의 차이가 있습니다.

예를 들어 다음 div에 하위 노드 P를 삽입하려는 경우:

노드

노드

다음과 같이 작성할 수 있습니다(특정 상황을 테스트할 때 다른 설명을 추가하세요):

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

위 코드를 통해 노드 div 아래에 새 노드가 생성되는지 테스트할 수 있습니다. 노드는 div의 마지막 노드입니다. (DOM을 보려면 IE는 IE 개발자 도구 모음 플러그인을 통해 볼 수 있고, Firefox는 Firebug를 사용할 수 있습니다)

분명히 이 예제를 통해 AppendChildhild와 insertBefore 모두 노드를 삽입할 수 있다는 것을 알 수 있습니다.

위의 예에는 oTest.insertBefore(newNode,null)와 같은 코드가 있습니다. 여기서 insertBefore에는 설정할 수 있는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는appendChild와 동일하지만 두 번째 매개변수는 고유합니다. . null일 수 있을 뿐만 아니라 다음도 가능합니다.

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

< script type="text/javascript">
var oTest = document.getElementById("test")
var refChild = document.getElementById("x1")
var newNode = document .createElement( "p");
newNode.innerHTML = "이것은 테스트입니다."
oTest.insertBefore(newNode,refChild)

이 예에서는 x1 노드 앞에 새 노드가 삽입됩니다.

또는:

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

<스크립트 유형 =" text/javascript">
var oTest = document.getElementById("test")
var refChild = document.getElementById("x1")
var newNode = document.createElement("p ") ;
newNode.innerHTML = "테스트입니다.";
oTest.insertBefore(newNode,refChild.nextSibling);

이 예 x1 노드 의 다음 노드 앞에 새 노드를 삽입합니다.

또한:

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

이 예에서는 첫 번째 하위 항목 앞에 새 노드를 삽입합니다. 노드, childNodes[0,1,...]를 변경하여 다른 위치에 새 노드를 삽입할 수도 있습니다.

insertBefore() 메소드는 기존 자식 노드 앞에 새로운 노드를 삽입하는 것임을 알 수 있지만, 예제 1에서는 insertBefore() 메소드를 사용하여 마지막에 새로운 노드를 삽입할 수도 있습니다. 하위 노드 목록의 두 가지 상황을 결합하면 insertBefore() 메소드가 하위 노드 목록의 임의 위치에 노드를 삽입할 수 있음을 알 수 있습니다.

다음 예에서:
appendChild() 메서드는 노드의 하위 노드 목록 끝에 새 하위 노드를 추가합니다.
insertBefore() 메서드는 노드의 하위 노드 목록의 임의 위치에 새 노드를 삽입합니다.