오늘은 jQuery의 append와 prepend 함수에 대한 내용을 정리해보려고 한다. 태그 요소를 추가할 때 주로 사용되는 개념이며, 활용도가 아주 높기 때문에 학습해 둔다면 유용하게 사용될 수 있다. 요소에 특정 콘텐츠를 추가해야 하는 경우는 많기 때문에 append와 prepend는 어떤 방식으로 동작하는지 개념과 활용 예제, 주의사항 등을 알아보자.
append와 prepend의 개념
위에서 설명한 바와 같이 두 함수는 HTML 요소에 새로운 콘텐츠를 추가하는 데 주로 사용되는 함수다. 두 함수의 기능은 매우 유사하나 약간의 차이가 있기 때문에 차이점을 파악하고 상황에 맞게 활용하는 것이 중요하다.
append
append 함수는 선택한 요소의 마지막 자식 요소로 설정된 콘텐츠를 추가하는 기능이다.
<div id="container">
<p>요소 1</p>
<p>요소 2</p>
</div>
<script>
$('#container').append('<p>요소 3</p>');
</script>위의 코드를 보게 되면 container 요소에 append 함수를 사용하여 '<p>요소 3</p>' 구문을 추가하고 있다. 이러한 경우에는 추가된 구문의 요소는 container 요소의 하위에 가장 마지막으로 추가된다.
prepend
prepend 함수는 선택한 요소의 첫 번째 자식 요소로 설정된 콘텐츠를 추가하는 기능이다.
<div id="container">
<p>요소 1</p>
<p>요소 2</p>
</div>
<script>
$('#container').prepend('<p>요소 3</p>');
</script>위의 코드는 container 요소에 prepend 함수를 사용하여 '<p>요소 3</p>' 구문을 추가하는 코드다. 이러한 경우에는 container 요소의 가장 첫 번째로 구문 요소를 추가하게 된다.
결과적으로 append는 가장 마지막에 추가가 되고, prepend는 가장 첫번째로 추가가 되는 차이점이 있다.
append와 prepend 함수의 활용 사례
append와 prepend 함수는 다양한 환경에서 활용될 수 있다. 기능을 구현하기 전에 다양한 환경에서 적용할 수 있다는 것을 숙지하고 구현하면 조금 더 도움이 될 수 있다.
동적 콘텐츠
웹 페이지에서 동적으로 콘텐츠를 추가할 때 유용하며, 사용자가 어떤 작업을 수행하면 새로운 항목이 리스트에 추가되는 경우가 있다. 이때 append나 prepend를 사용하여 새로운 콘텐츠를 즉시 추가할 수 있다.
애니메이션 효과
새로운 요소를 추가할 때 애니메이션 효과를 적용하고 싶은 경우가 있는데, jQuery의 애니메이션 메서드와 append 또는 prepend 함수를 함께 사용하여 새로운 요소가 부드럽게 나타나거나 사라지도록 구성할 수 있다.
콘텐츠 정렬
리스트나 테이블 등의 컨테이너에 새로운 아이템을 추가할 때, 이를 특정 위치에 추가하고 싶은 경우가 있는데, append는 마지막에, prepend는 처음에 추가되므로 이를 활용하여 원하는 위치에 콘텐츠를 추가할 수 있다.
동적 메뉴 구성
동적으로 메뉴를 구성할 때 유용하며, 사용자의 권한에 따라 메뉴 항목이 동적으로 생성되고 보여져야 하는 경우가 있는데, append나 prepend 함수를 사용하여 메뉴 항목을 동적으로 추가하고 적절한 위치에 표시할 수 있다.
위와 같은 방법으로 append와 prepend 함수는 웹 개발에서 동적으로 콘텐츠를 관리하고 효과적으로 제어하는 데에 유용하게 사용된다.
append() 함수 예제 소스 코드
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function () {
/**
* 데이터 리스트
*/
const dataList = [
{ name: '이병헌', age: 25 },
{ name: '소지섭', age: 21 },
{ name: '하정우', age: 22 },
{ name: '박해수', age: 19 },
{ name: '황정민', age: 24 },
];
/**
* append button click 이벤트
*/
$('#appendId').unbind('click').click(function () {
dataList.forEach((item, index) => {
let html = '<tr>';
html += ' <td>' + index + '</td>';
html += ' <td>' + item.name + '</td>';
html += ' <td>' + item.age + '</td>';
html += '</tr>';
// table tbody 요소 하위에 append html
$('#dataTable tbody').append(html);
});
});
});
</script>
<div>
<input type="button" value="Append click" id="appendId">
</div>
<br>
<div>
<table id="dataTable" border>
<thead>
<tr>
<th>No</th>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<style>
table {
table-layout: fixed;
width : 500px;
}
</style>위의 소스 코드는 데이터 목록을 for문을 통해 하나씩 table 하위 tbody 요소로 append 시키는 기능이다.
임의로 dataList 목록을 만들고 append 버튼을 클릭하게 되면 table 하위 tbody 요소 밑으로 순차적으로 append 시키게 된다.
보통 테이블 목록, 그리드 목록 등 목록형 요소 하위에 연속적으로 넣을때 해당 기능을 사용하면 적절하다.
실행 결과
위의 실행 결과와 같이 dataList에 담겨있는 데이터 순서대로 append 되는 것을 확인할 수 있다.
prepend() 함수 예제 소스 코드
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function () {
/**
* 데이터 리스트
*/
const dataList = [
{ name: '이병헌', age: 25 },
{ name: '소지섭', age: 21 },
{ name: '하정우', age: 22 },
{ name: '박해수', age: 19 },
{ name: '황정민', age: 24 },
];
/**
* append button click 이벤트
*/
$('#appendId').unbind('click').click(function () {
dataList.forEach((item, index) => {
let html = '<tr>';
html += ' <td>' + index + '</td>';
html += ' <td>' + item.name + '</td>';
html += ' <td>' + item.age + '</td>';
html += '</tr>';
// table tbody 요소 하위에 append html
$('#dataTable tbody').append(html);
});
});
/**
* prepend button click 이벤트
*/
$('#prependId').unbind('click').click(function () {
dataList.forEach((item, index) => {
let html = '<tr>';
html += ' <td>' + index + '</td>';
html += ' <td>' + item.name + '</td>';
html += ' <td>' + item.age + '</td>';
html += '</tr>';
// table tbody 요소 하위에 prepend html
$('#dataTable tbody').prepend(html);
});
});
});
</script>
<div>
<input type="button" value="Append click" id="appendId">
<input type="button" value="Prepend click" id="prependId">
</div>
<br>
<div>
<table id="dataTable" border>
<thead>
<tr>
<th>No</th>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<style>
table {
table-layout: fixed;
width : 500px;
}
</style>위의 소스 코드는 append 버튼 옆에 prepend 버튼을 추가해 기능을 구현하였다.
기능의 사용 방법은 동일하지만 추가되는 순서가 조금 차이가 있다. append같은 경우는 위에서부터 순서대로 아래에 하나씩 추가를 하는 기능이지만 prepend 같은 경우는 0번째 row에 넣게 되는 기능이다.
실행 결과
append로 추가를 했을 때에는 dataList의 순서에 맞게 추가가 되었는데, prepend로 추가를 하게 되면 dataList의 역순으로 추가가 된 모습이다.
append 함수와 prepend 함수는 특정 요소 하위에 요소를 추가하게 되는 기능인데 이벤트를 계속 실행하게 되면 무한하게 요소가 추가가 된다는 점이 있다. 그래서 이러한 부분에 대해 초기화가 필요한 경우에는 empty 함수를 함께 사용하면 적절하다.
empty() 함수의 예제 소스 코드
/**
* append button click 이벤트
*/
$('#appendId').unbind('click').click(function () {
let html = '';
dataList.forEach((item, index) => {
html += '<tr>';
html += ' <td>' + index + '</td>';
html += ' <td>' + item.name + '</td>';
html += ' <td>' + item.age + '</td>';
html += '</tr>';
});
// table tbody 요소 하위에 append html
$('#dataTable tbody').empty().append(html);
});
/**
* prepend button click 이벤트
*/
$('#prependId').unbind('click').click(function () {
// 초기화
$('#dataTable tbody').empty();
dataList.forEach((item, index) => {
let html = '<tr>';
html += ' <td>' + index + '</td>';
html += ' <td>' + item.name + '</td>';
html += ' <td>' + item.age + '</td>';
html += '</tr>';
// table tbody 요소 하위에 prepend html
$('#dataTable tbody').prepend(html);
});
});위의 소스 코드는 empty() 함수를 사용하여 목록을 append 또는 prepend 할 때마다 tbody 하위 요소를 비워주고 새로 넣게 되는 예제 코드다. 보통 append 또는 prepend 함수를 사용할 때 초기화가 필요한 경우가 많은데, empty 함수를 활용한다면 간단하게 초기화시킬 수 있다.
append button click 하는 함수와 prepend button click하는 함수 부분에서 .empty() 호출하는 부분을 추가하였다.
조금 다른 점은 append하는 부분에서는 데이터 리스트 for문을 돌면서 append 직전에 empty() 처리를 하였고,
prepend 하는 부분에서는 데이터 리스트 for문을 돌기 전에 전체 empty() 처리를 한 후 목록 요소를 만들어 한번에 prepend 될 수 있도록 처리하였다.
사용법은 조금 다르지만 기능은 동일하게 적용이 되므로 상황에 맞게 초기에 empty() 처리를 할지 마지막에 추가하기 전에 empty() 처리를 할지 넣어주면 된다.
empty 처리 전 / 후 비교
empty 함수를 사용해서 초기화 시켰을 때와 초기화 없이 계속 추가됐을 때의 차이가 크기 때문에 목록형 요소에 요소를 추가할 때에는 반드시 empty를 활용하여 구성하는 것이 좋다.
append와 prepend 함수 사용 시 주의사항
jQuery의 append와 prepend 함수는 콘텐츠를 동적으로 추가할 때 매우 유용하지만, 그만큼 주의해서 사용해야 한다.
DOM 조작
append와 prepend 함수는 DOM에 직접적인 조작을 수행하기 때문에, 많은 요소를 추가하려는 경우에는 성능에 영향을 줄 수 있다. 따라서 대량의 요소를 추가할 때에는 DOM 조작을 최소화하고, 가능하면 요소들을 하나의 문서 조각으로 추가하는 것이 좋다.
이벤트 처리
새롭게 추가되는 요소에 이벤트 핸들러를 등록할 경우에는 이벤트 버블링과 캡처링을 이해하고 이를 적절하게 처리해야 한다. 동적으로 추가되는 요소들은 정적으로 추가되는 요소들과 달리 초기에는 존재하지 않기 때문에 이벤트가 올바르게 연결되도록 주의하는 것이 좋다.
HTML 문자열
append와 prepend 함수는 HTML 문자열을 직접적으로 사용하기 때문에 안전하지 않은 문자열이 포함될 경우에는 XSS (Cross-Site Scripting) 공격에 취약해질 수 있다. 사용자 입력값을 삽입할 때에는 반드시 안전하게 처리하고, 필요한 경우 이스케이프 처리를 해야 한다.
메모리 누수
jQuery를 사용하여 동적으로 요소를 추가하면 메모리 누수가 발생할 수 있다. 이는 요소들이 필요 이상으로 메모리에 남아있게 되어 발생하는 문제로, 필요 없어진 요소들을 적절히 제거하여 메모리 누수를 방지해야 한다.
성능 최적화
append와 prepend 함수를 사용할 때에는 가능하면 성능을 고려하여 최적화된 방법을 선택해야 한다. 예를 들어, 한 번에 여러 요소를 추가하는 것보다는 단일 요소를 추가하는 것이 성능상 이점을 가져올 수 있다.
이러한 주의사항들을 고려하여 append와 prepend 함수를 사용하면 웹 서비스를 보다 더 안전하고 효율적으로 개발할 수 있다.
마무리
오늘은 이렇게 jQuery의 append(), prepend(), empty() 함수까지 활용한 예제와 개념, 주의사항 등을 정리해 보았다. 기능의 사용법은 매우 간단하고 조작하기 편하지만, 그만큼의 주의사항도 따르기 때문에 반드시 고려해서 구현하는 것이 좋다.
append는 일반적으로 데이터를 요소 안에 추가할 때 사용하면 좋고, prepend는 실시간으로 최상단에 데이터를 추가할 때 사용하면 좋다고 생각한다.
'javascript > jQuery' 카테고리의 다른 글
| jQuery 태그 요소를 조회하는 closest(), find() 함수를 알아보자 (0) | 2023.01.02 |
|---|---|
| jQuery .children() .parent() 배워보기! (0) | 2023.01.02 |
| jQuery show() hide() 이벤트 배워보기! (0) | 2022.12.30 |
| jQuery click 이벤트의 개념과 활용방법 알아보기 (0) | 2022.12.28 |
| jQuery 텍스트 문구 자동 롤링 기능 (fade in / out) (0) | 2022.02.17 |
