기술 지원할 때 많은 코드를 보는데 가끔 (append|prepend...)To 관련 메서드을 활용하지 못해 좀 읽기 어렵게 개발하는 경우를 봐서 생각난 김에 정리한다.
(append|prepend...)To 관련 기능은 대부분의 라이브러리에 있지만, 여기선 [jQuery]을 예를 들어 설명한다.
보통 append, prepend... VS appendTo, prependTo...의 차이를 모르는 사람은 거의 없다.
간단히 설명하면 append는 부모 엘리먼트에 자식 엘리먼트를 마지막 자식 노드로 추가하는 메서드이다. 그래서 $(parent).append(child)는 parent가 앞이고 child가 뒤이고, appendTo는 $(child).appendTo(parent) 처럼 반대다.
그럼.. 예를 들어, 아래와 같은 기능을 구현한다고 생각해보자.
.layer라는 클래스를 가진 엘리먼트를 #parent에 마지막 자식 노드로 추가하는데 fadeIn되어야 한다.
(IE 하위 버전을 지원하기 위해 CSS transform은 사용하지 않는다고 가정하자.)
이런 기능을 구현한다고 하면 내가 본 코드의 패턴 중 하나는 아래와 같다.
var layer = $("<div class='layer'>"); $("#parent").append(layer); layer.fadeIn();
때론 jQuery을 chaining하기 위해 아래와 같이 사용하곤 한다.
$("#parent").append("<div class='layer'>").find(".layer").fadeIn();
여기서 .layer가 여러 개이면 아래와 같이 개발하는 경우도 있다.
$($("#parent").append("<div class='layer'>").find(".layer")[0]).fadeIn()
마지막을 제외하곤(마지막은 코드 읽기가 어렵다) 위의 방법이 모두 나쁘니깐 개선하면 좋겠다라는 의미로 얘기하기보다 xxxxTo관련 메서드로 아래와 같이 할 수도 있다 정도로 이해해주면 좋겠다.
보통 나는 아래처럼 작성한다.
$("<div class='layer'>").appendTo("#parent").fadeIn();
위의 예로 개발한 경우 xxxxTo을 모르는 경우가 거의 없었지만, 이런식으로 할 수 있다고 제안하면 새롭게 느끼는걸 알 수 있었다.
정리하면 xxxxTo는 단순히 부모와 자식의 위치를 바꿔서 엘리먼트를 추가할 때 사용한다기 보다 등록하는 엘리먼트을 기준으로 추가 작업을 하기 위해 사용하는 메서드로 알고 있으면 좀 더 다양하게 활용할 수 있다.
마지막으로 실제 사례를 찾고 싶어서 [github]에서 찾아봤는데 비슷한 사례가 있어 소개한다.
아.. github은 advance search가 안되서 정말 아쉽다. 그립다 code.google.com이여.
// 실제 코드 $('body').append('<div class="fyr"></div>').find('div.fyr').findYourRep({apis: 'represent'}); // 개선 코드 $('<div class="fyr"></div>').appendTo('body').findYourRep({apis: 'represent'});