AppendChild 정의
AppendChild(newChild: 노드) : 노드
노드의 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', '사용자 이름:');
var usernameText = document.Document.getElementById('username');
사용자 이름Text.appendChild(newElement);
insertBefore정의
insertBefore() 메서드는 기존 하위 노드 앞에 새 하위 노드를 삽입합니다.
insertBefore() 메서드는 기존 하위 노드 앞에 새 하위 노드를 삽입하는 데 사용됩니다.
삽입사용 전
target.insertBefore(newChild,existingChild)
newChild는 기존Child 노드 앞에 target의 하위 노드로 삽입됩니다.
기존Child는 선택적 매개변수입니다. null인 경우 해당 효과는appendChild와 동일합니다.
insert예제 앞에
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "이것은 테스트입니다";
oTest.insertBefore(newNode,oTest.childNodes[0]);
좋아요, insertBefore가 있으면 insertAfter도 있어야겠죠?
자, Aptana를 사용하여 예제를 작성해 보겠습니다. 하지만 Aptana의 스마트 프롬프트에서는 insertAfter 메서드가 없다고 알려줍니다.
그런 다음 스스로 Luo를 정의하세요 :)
삽입정의 후
함수 insertAfter(newEl, targetEl)
{
var parentEl = targetEl.parentNode;
if(parentEl.lastChild == targetEl)
{
parentEl.appendChild(newEl);
}또 다른
{
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를 사용하여 새 노드를 삽입합니다. 전제는 형제 노드에 공통 상위 노드가 있어야 한다는 것입니다.