InsertAfter function

제레미 키스의 "DOM 스크립트" insertAfter 함수 만들기 예제를 옮겨 봤습니다.

사실 저도 왜 insertAfter 메서드가 없는지 잘 모르겠습니다. 있다면 참 유용해 보이는데 말입니다.

비록 DOM이 insertAfter 라는 메서드를 제공해주고 있지 않지만 특정 노드 뒤에 새 노드를 추가하는 방법은 있습니다. 우리는 기존의 DOM 메서드와 프로퍼티로 insertAfter 기능을 하는 함수를 만들어 보겠습니다.

							function insertAfter (newElement, targetElement) {
								var parent = targetElement.parentNode;
								if (parent.lastChild == targetElement) {
									parent.appendChild(newElement);
								}else {
									parent.insertBefore(newElement, targetElement.nextSibling);
								}
							}				
						

이 함수는 다음 몇 가지 DOM 메서드와 프로퍼티를 사용합니다.

  • ▣ parentNode 프로퍼티
  • ▣ lastChild 프로퍼티
  • ▣ appendChild 프로퍼티
  • ▣ insertBefore 프로퍼티
  • ▣ nextSibling 프로퍼티


자! 함수를 차근차근 만들어 보겠습니다.

우선 함수에는 두 개의 인수가 필요합니다. 추가할 새 요소와 이 요소를 어떤 요소 뒤에 넣을지를 정해 주는 타겟 요소입니다. 이를 newElement와 targetElement라는 변수로 지정하겠습니다.

							function insertAfter (newElement, targetElement)	
						

타겟 요소의 parentNode 프로퍼티를 얻어서 parent라는 변수로 지정합니다.

							var parent = targetElement.parentNode
						

타겟 요소가 부모의 마지막 자식인지를 확인한 다음, 타겟 요소와 부모의 lastChild 프로퍼터와 비교를 합니다.

							if (parent.lastChild == targetElement)
						

이것이 참이면 appendChild를 이용해 새 요소를 추가합니다. 새 요소를 타겟 오쇼 뒤에 추가합니다.

							parent.appendChild(newElement)
						

그렇지 않으면 새 요소를 타겟 요소와 부모의 다음 자식 요소 사이에 추가해야 되겠지요. 타겟 요소 뒤에 있는 다음 노드는 타겟 요소의 nextSibling 프로퍼티입니다. 타겟 요소의 다음 형제 앞에 새 요소를 추가하기 위해 insertBefore 메서드를 사용해 보겠습니다.

							parent.insertBefore(newElement, targetElement.nextSibling)
						

솔직히 말해 이해하기 어렵고 복잡해 보이는 함수입니다. 하지만 개인적으로 사용하는 유용한 함수 정도로 생각하면 됩니다. 지금 이것을 다 이해하지 못했다 해도 걱정하지 마세요. 우리가 insertAfter 함수가 사용하는 DOM 메서드와 프로퍼티에 좀더 익숙하게 되면 나중에 더 쉽게 이해할 수 있습니다. addLoadEvent 처럼 그냥 사용하기 유용한 함수 중 하나라고 보시면 됩니다.