document.createElement() 사용법_javascript 기술

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

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

예 1:

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

   



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

예 3:

코드 복사

코드는 다음과 같습니다.   

위 코드를 통해 node div 아래에 새로운 노드가 생성되는 것을 테스트할 수 있는데, 이 노드가 div의 마지막 노드입니다. 분명히 이 예제를 통해 우리는 AppendChildhild와 insertBefore 모두 노드를 삽입할 수 있다는 것을 알 수 있습니다.

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

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

효과: 이 예에서는 x1 노드 앞에 새 노드를 삽입합니다

또는:

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

효과: 이 예에서는 x1 노드의 다음 노드 앞에 새 노드를 삽입합니다

또한:

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

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

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

다음 예에서:

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