js_javascript 기술에서 AppendChild 및 insertBefore 사용에 대한 자세한 분석

appendChild 정의
appendChild(newChild: Node): Node
노드의 childNodes 배열에 노드를 추가합니다.
지원: IE 5.0, Mozilla 1.0, Netscape 6.0, Safari 1.0, Opera 7.0
지정된 노드의 하위 노드 배열에 노드를 추가합니다. 간단히 말하면, 지정된 노드에 요소를 추가하는 것입니다. 🎜>appendChild 사용법

target.appendChild(newChild)
newChild는 마지막 하위 노드 다음에 target의 하위 노드로 삽입됩니다

appendChild 예

var newElement = document.Document.createElement('label'); newElement.Element.setAttribute('value', 'Username:');
var usernameText = document.Document.getElementById('username');
usernameText.appendChild(newElement);

insertBefore 정의

insertBefore() 메서드는 기존 하위 노드 앞에 새 하위 노드를 추가합니다.
insertBefore() 메소드의 기능은 다음과 같습니다. 기존 하위 노드 앞에 새 하위 노드를 삽입합니다

insertBefore 사용

target.insertBefore(newChild, 기존Child)
newChild는 기존Child 노드 앞에 target의 하위 노드로 삽입됩니다

existingChild는 선택적 매개변수이며 null인 경우 해당 효과는appendChild와 동일합니다

insertBefore example

var oTest = document.getElementById("test");var newNode = document.createElement("p");
newNode.innerHTML = "This 테스트입니다.";
oTest.insertBefore(newNode,oTest.childNodes[0]);

그럼 insertBefore가 있으면 insertAfter도 있어야겠죠?
자, Aptana를 사용하여 예제를 작성해 보겠습니다. 그런데 Aptana의 스마트 프롬프트에서 insertAfter 메소드가 없다고 합니다
그런 다음 직접 정의해 보세요.)


insertAfter 정의

function insertAfter(newEl, targetEl){
var parentEl = targetEl.parentNode;
if(parentEl.lastChild == targetEl)
{
parentEl.appendChild(newEl);
}else
{
parentEl.insertBefore(newEl,targetEl.nextSibling);
} >insertAfter 사용법은 예시와 동일

var txtName = document.getElementById("txtName ");
var htmlSpan = document.createElement("span");
htmlSpan.innerHTML = "테스트입니다.";
insertAfter(htmlSpan,txtName);

txtName 노드 뒤에 txtName의 형제 노드로 htmlSpan을 삽입합니다.

요약:

1.appendChild와 insertBefore는 올바른 노드를 만드는 방법입니다. 사용되었으며 insertAfter는 단지 사용자 정의 함수일 뿐입니다

2.appendChild에 비해 insertBefore는 더 유연하며 대상 노드의 하위 노드 배열의 모든 위치에 새 노드를 삽입할 수 있습니다.
3. 새 노드를 삽입하려면 appendChild 및 insertBefore를 사용하세요. 전제는 형제 노드에 공통 상위 노드가 있어야 한다는 것입니다