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

"블로그에 새로운 글감을 찾았다."
라기보다는 그냥 가내수공업으로 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);
}

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