제이쿼리 요소 추가가 왜 필요할까?
웹 앱을 만들다 보면 동적으로 리스트를 늘리고, 레이아웃을 감싸고, 새 노드를 삽입해야 할 때가 많습니다. 제이쿼리 요소 추가 메소드는 자바스크립트 순수 DOM API보다 간결한 문법과 체이닝 지원으로 업무 시간을 크게 단축해 줍니다.
1. 기존 요소 내부에 콘텐츠 삽입
핵심 메소드
| 메소드 | 작동 위치 | 특징 |
|---|---|---|
| .append() | 맨 뒤 | "요소.append('...')" |
| .prepend() | 맨 앞 | "요소.prepend('...')" |
| .appendTo() | 대상 맨 뒤 | $('새요소').appendTo('대상') |
| .prependTo() | 대상 맨 앞 | $('새요소').prependTo('대상') |
실전 예제
$("#list").append("<li>새로운 항목</li>");
$("#list").prepend("<li>첫 번째 항목</li>");
$("<li>다섯 번째</li>").appendTo("#list");
$("<li>제로 인덱스</li>").prependTo("#list");
Tip: 최종 DOM 위치를 기준으로 생각하면 .appendTo() / .prependTo()를 더 직관적으로 쓸 수 있습니다.
2. 기존 요소 외부에 노드 삽입
핵심 메소드
| 메소드 | 삽입 위치 | 특징 |
|---|---|---|
| .before() | 요소 앞 | "요소.before('...')" |
| .after() | 요소 뒤 | "요소.after('...')" |
| .insertBefore() | 선택자 앞 | $('새요소').insertBefore('선택자') |
| .insertAfter() | 선택자 뒤 | $('새요소').insertAfter('선택자') |
$("#row").before("<tr><td>머리행 추가</td></tr>");
$("#row").after("<tr><td>꼬리행 추가</td></tr>");
$("<tr><td>왼쪽 셀</td></tr>").insertBefore("#cell");
$("<tr><td>오른쪽 셀</td></tr>").insertAfter("#cell");
테이블 동적 추가나 배너 순서 조정에 특히 유용합니다.
3. 기존 요소를 감싸는 구조 변경
wrap 계열 메소드
| 메소드 | 범위 | 설명 |
|---|---|---|
| .wrap() | 각 요소 | 요소마다 개별 래퍼 생성 |
| .wrapAll() | 모든 요소 | 한 번에 하나의 래퍼로 감쌈 |
| .wrapInner() | 내부 콘텐츠 | 요소 안쪽을 감쌈 |
$(".content").wrap("<div class='wrapper'></div>");
$(".content").wrapAll("<section class='group'></section>");
$(".content").wrapInner("<div class='inner'></div>");
제이쿼리 요소 추가 중에서도 레이아웃 리팩터링이나 애니메이션용 컨테이너를 만들 때 wrap 시리즈가 빛을 발합니다.
4. 메소드 체이닝으로 가독성 UP
$("#card")
.prepend("<h2>제목</h2>")
.append("<p>본문</p>")
.wrap("<div class='card-wrapper'></div>");
- 연속 호출로 DOM 탐색 비용 절감
- 반환값이 jQuery 객체이므로 다른 메소드와 자연스럽게 이어짐
5. 퍼포먼스를 위한 실전 팁
- 템플릿 문자열로 긴 HTML을 변수화하여 유지보수 개선
- 반복 루프에서
.append()를 여러 번 호출하면 리플로우가 발생 → 빈 문자열로 누적 후 한 번만 추가 .detach()+ 재삽입 기법으로 이벤트·데이터 손실 없이 위치 이동
const $item = $("#moveMe").detach();
$item.insertAfter("#target");
질문 정리
| 질문 | 답변 |
|---|---|
| append와 appendTo 중 뭐가 더 빠른가요? | 내부 구현은 거의 동일하므로 가독성 기준으로 선택하세요. |
| wrapInner와 append의 차이점은? | wrapInner는 기존 콘텐츠를 새 요소로 감싼다, append는 새 콘텐츠를 추가한다는 점이 다릅니다. |
| 여러 요소를 동시에 추가하려면? | 배열이나 map()으로 HTML을 누적 후 .append(html) 한 번만 호출하면 효율적입니다. |
| 비동기 데이터로 리스트를 만들 땐? | AJAX 성공 콜백 안에서 .append() 대신 document fragment에 먼저 추가 후 삽입하면 리플로우 최소화에 좋습니다. |
| React 같은 프레임워크와 같이 써도 되나요? | 가능하지만 가상 DOM과 직접 DOM 조작이 충돌할 수 있으니 레거시 위젯에 한정해 사용하는 게 안전합니다. |
댓글남기기