appendChild()나 insertBefore()의 사용법과 차이점 소개_기본지식

document.createElement()는 객체 내에 객체를 생성하며,appendChild() 또는 insertBefore() 메서드와 함께 사용해야 합니다. 그 중appendChild() 메소드는 노드의 하위 노드 목록 끝에 새로운 하위 노드를 추가합니다. insertBefore() 메소드는 노드의 하위 노드 목록의 임의의 위치에 새 노드를 삽입합니다.

다음은 document.createElement()를 사용하는 방법의 예입니다.

예 1:

코드 복사

효과: 속성 값을 사용하여 드롭다운 목록 상자를 로드합니다. ​​​"추가 기능 1" 및 "추가 기능 2".

예시 3:

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

효과 : 태그에서 속성 값 "use setAttribute"를 사용하여 텍스트 상자를 보드에 로드합니다. 이 텍스트 상자를 클릭하면 "This is a test!"라는 대화 상자가 나타납니다.

위 예시를 보면, 객체의 속성을 불러와서 설정할 수 있음을 알 수 있으며, 파라미터도 동일합니다. e.type="text" 및 e.setAttribute("type", "text")를 사용하면 동일한 효과가 있습니다.

아래에서는 예제를 사용하여appendChild() 메서드와 insertBefore() 메서드의 차이점을 설명합니다.
예를 들어 하위 노드 P를 다음 div에 삽입하려는 경우:

Node

Node< ;/ p>

다음과 같이 작성할 수 있습니다.

코드를 복사하세요 코드는 다음과 같습니다. :

위 코드를 통해 노드 div 아래에 새 노드가 생성되는지 테스트할 수 있습니다. 이 노드는 div의 마지막 노드입니다. 분명히 이 예제를 통해 우리는 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 노드 앞에 새 노드

를 삽입하거나

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

🎜>

효과: 이 예에서는 x1 노드

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

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

이 예에서는 childNodes[0, 1,...] 노드

보시다시피 insertBefore() 메서드의 특징은 기존 자식 노드 앞에 새 노드를 삽입하는 것입니다. 그러나 예제 1에서는 insertBefore() 메서드도 가능합니다. 하위 노드 목록의 끝에 새 노드를 삽입하는 데 사용됩니다. 두 가지 상황을 결합하면 insertBefore() 메소드가 하위 노드 목록의 임의 위치에 노드를 삽입할 수 있음을 알 수 있습니다.

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