반응형
append()와 prepend() 함수는 웹페이지의 요소를 다른 웹페이지의 요소 내에 추가하는 데 사용되는 메서드입니다. jQuery를 사용하여 HTML 요소를 동적으로 조작하고 구성하는 데 유용합니다.
사용법
append()
-append() 메서드는 선택한 요소의 마지막 자식으로 지정한 내용을 추가합니다. 선택한 요소의 자식 요소 목록 중 가장 뒤에 새로운 내용을 삽입합니다.
$(선택자).append(내용);
선택자: 요소를 선택하기 위한 jQuery 선택자입니다.
내용: 추가할 HTML, 텍스트 또는 요소입니다.
prepend()
-prepend() 메서드는 선택한 요소의 첫 번째 자식으로 지정한 내용을 추가합니다. 선택한 요소의 자식 요소 목록 중 가장 앞에 새로운 내용을 삽입합니다.
$(선택자).prepend(내용);
선택자: 요소를 선택하기 위한 jQuery 선택자입니다.
내용: 추가할 HTML, 텍스트 또는 요소입니다.
활용예제
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<body>
<h2>예제 1: 동적 목록 구성</h2>
<ul id="dynamicList">
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ul>
<button id="appendItem">아이템 추가</button>
<button id="prependItem">아이템 앞에 추가</button>
<h2>예제 2: 동적 테이블 행 추가</h2>
<table id="dynamicTable">
<thead>
<tr>
<th>학생 이름</th>
<th>성적</th>
</tr>
</thead>
<tbody>
<tr>
<td>학생 1</td>
<td>85</td>
</tr>
<tr>
<td>학생 2</td>
<td>92</td>
</tr>
</tbody>
</table>
<button id="appendRow">행 추가</button>
<h2>예제 3: 동적 폼 필드 추가</h2>
<form id="dynamicForm">
<label for="name">이름:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">이메일:</label>
<input type="email" id="email" name="email">
</form>
<button id="addField">필드 추가</button>
<script>
// 예제 1: append() 및 prepend() 메서드로 동적 목록 구성
$("#appendItem").click(function() {
$("#dynamicList").append("<li>append 새로운 항목 추가됨</li>");
});
$("#prependItem").click(function() {
$("#dynamicList").prepend("<li>prepend 앞에 추가된 항목</li>");
});
//예제 2: 동적 테이블 행 추가
$("#appendRow").click(function() {
var newRow = "<tr><td>새로운 학생</td><td>평균 점수</td></tr>";
$("#dynamicTable tbody").append(newRow);
});
//예제 3: 동적 폼 필드 추가
$("#addField").click(function() {
var newField = "<label for='newField'>새로운 필드:</label><input type='text' id='newField' name='newField'><br>";
$("#dynamicForm").append(newField);
});
</script>
</body>
예제 1: 동적 목록 구성
-버튼 클릭을 통해서 append() 메서드를 사용하여 목록에 새로운 항목이 추가되고, prepend() 메서드를 사용하여 첫 번째 목록의 앞에 새로운 항목이 추가됩니다.
예제 2: 동적 테이블 행 추가
-행 추가 버튼을 클릭하면 append() 메서드를 사용하여 테이블의 본문(<tbody>)에 새로운 행이 추가됩니다.
예제 3: 동적 폼 필드 추가
-필드 추가 버튼을 클릭하면 append() 메서드를 사용하여 새로운 입력 필드가 폼에 추가됩니다.
반응형
'개발이야기 > jQuery' 카테고리의 다른 글
| [jQuery] trigger() 메서드 사용법, 예제 (이벤트 강제발생) (0) | 2023.11.03 |
|---|---|
| [jQuery] Air Datepicker 사용방법, 예제 (날짜 선택) (0) | 2023.10.31 |
| [jQuery] each() 메서드 사용법, 예제, 활용방법 (반복 작업) (1) | 2023.10.26 |
| [jQuery] select 선택 값 가져오고 변경하기, option 추가하고 확인하기 (0) | 2023.10.12 |
| [jQuery] radio, checkbox 체크 값 가져오기, 확인하기, 선택하기 (0) | 2023.10.11 |
댓글