JavaScript_javascript 기술에서appendChild, insertBefore 및 insertAfter를 사용하기 위한 지침

appendChild 정의
appendChild(newChild: 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 사용법

target.insertBefore(newChild, 기존Child) newChild는 기존Child 노드
existingChild 앞에 대상의 하위 노드로 삽입됨은 선택적 매개변수입니다. null인 경우 해당 효과는 AppendChild

insertBefore example


코드 복사

코드는 다음과 같습니다. var oTest = document.getElementById("test") var newNode = document.createElement("p");

newNode.innerHTML = "이것은 테스트입니다."

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 노드 뒤에 htmlSpan을 txtName의 형제 노드로 삽입하세요.

요약:
1.appendChild와 insertBefore는 노드를 페어링하는 방법으로 사용되는 반면, insertAfter는 단지 사용자 정의 함수입니다
2. insertChild에 비해 insertBefore는 더 유연하며 대상 노드의 모든 노드 배열에 새 노드를 삽입할 수 있습니다.
3. 새 노드를 삽입하려면 appendChild 및 insertBefore를 사용하세요. 전제는 형제 노드에 공통 상위 노드가 있어야 한다는 것입니다