Sablog Models/인터넷·웹

유용한 확장 JavaScript Library (1) insertAfter()

어­리 2010. 2. 11. 00:37
"블로그에 새로운 글감을 찾았다."
라기보다는 그냥 가내수공업으로 JS로 이것저것 만드는 도중에 함수를 만들고 있다.

최근에 JS를 새로 익히면서 DOM 따위는 순식간에 이해했지만(이미 XML을 충분히 배운 덕분에),
역시 골치를 썩이는 건 이 함수 놈들.
표준 함수들은 그나마 용법이 잘 정리되어 있지만...
사용자가 만들어서 널리 쓰이는 함수들 때문에 헷갈리기 일쑤다.
확장 함수 이름을 다 똑같이 쓰다 보니 표준 함수인지 헷갈리기 시작하면 2시간 삽질은 기본이다.

그래서 나는 표준 함수 말고 일단 확장 함수들을 정리할 생각이다.
이 글을 읽는 사람이 DOM, 노드 구조 등에 관한 기본 지식이 있는 초보 개발자라고 가정하고,
상세한 설명은 하지 않겠다.


첫 번째 대상은 insertAfter()이다.
이 자식은 표준 함수인 insertBefore()와 비슷하다. insertBefore()의 일반적인 용법은,
"부모 노드".insertBefore("삽입 대상", "대상을 이 앞에 넣을 위치");
이렇다. 이와 비슷하게 insertAfter()는 이런 용법으로 쓰일 목적으로 만들어진다.
insertAfter("삽입 대상", "대상을 이 뒤에 넣을 위치");

insertAfter() 함수는 웹 사이트에 이미 널리 알려져 있는 확장 함수라서,
이와 같은 소스를 찾기 쉽다.
function insertAfter(newNode, referenceNode) {
    document.body.insertBefore(newNode, referenceNode.nextSibling);
}
그리고 나는 이 때문에 "여기 삽질 1시간 추가요!"를 불렀다.

알다시피 위 함수는 insertBefore()를 사용한다.
대상 노드 뒤에 끼워야 하기 때문에, 이 때 대상 노드의 뒤 노드를 찾아 앞에 끼우는 것이다.
그러나 내가 위 함수의 문제를 발견한 까닭은, 내가 마지막 노드 뒤에 끼우려 했기 때문이다.
마지막 노드에는 다음 형제 노드(.nextSibling)가 없다.
그럼 위 명령 자체가 성립이 안 되고 작동도 당연히 불가능하다.

따라서 위치 참조 노드가 마지막 노드인지 알아보고,
마지막 노드인 경우에는 노드를 뒤에 추가(append)해야 한다.
function insertAfter(newNode, referenceNode) {
    refParentNode = referenceNode.parentNode;
    if (referenceNode != refParentNode.lastChild)
        refParentNode.insertBefore(newNode, referenceNode.nextSibling);
    else
        refParentNode.appendChild(newNode);
}

보다시피 참조된 노드가 마지막 노드가 아니라면 위의 경우를 그냥 적용하면 된다.