반응형
기존 요소의 내부에 새로운 요소나 콘텐츠를 추가해주는 메소드
| 메소드 | 설명 |
| .append() | 선택한 요소의 마지막에 새로운 요소나 콘텐츠를 추가함. |
| .prepend() | 선택한 요소의 처음에 새로운 요소나 콘텐츠를 추가함. |
| .appendTo() | 선택한 요소를 해당 요소의 마지막에 삽입함. |
| .prependTo() | 선택한 요소를 해당 요소의 처음에 삽입함. |
| .html() | 해당 요소의 HTML 콘텐츠를 반환하거나 설정함. |
| .text() | 해당 요소의 텍스트 콘텐츠를 반환하거나 설정함. |
1. .append() 메소드
선택한 요소의 '마지막'에 새로운 요소나 콘텐츠를 추가
<script>
$(function(){
$("button").on("click", function(){
$("#list").append("<li>아이템 새로 추가!!</li>")
})
})
</script>
<body>
<h1>.append() 메소드</h1>
<ul id="list">
<li> 햄버거 </li>
<li> 피자 </li>
<li> 김치찌개 </li>
</ul>
<button>아이템 추가</button>
</body>▼result
2. .prepend() 메소드
선택한 요소의 '처음'에 새로운 요소나 콘텐츠를 추가
<script>
$(function(){
$("button").on("click", function(){
$("#list").prepend("<li>음식</li>")
})
})
</script>
<body>
<h1>.prepend() 메소드</h1>
<ul id="list">
<li> 햄버거 </li>
<li> 피자 </li>
<li> 김치찌개 </li>
</ul>
<button>아이템 추가</button>
</body>▼result
반응형
3. .appendTo() 메소드
- 선택한 요소를 '해당 요소의 마지막'에 삽입
- .append() 매소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대
<script>
$(function() {
$("#firstBtn").on("click", function() {
// id가 "list"인 요소의 맨 마지막에 id가 "firstItem"인 요소를 추가함.
$("#firstItem").appendTo("#list");
});
$("#secondBtn").on("click", function() {
// id가 "list"인 요소의 맨 마지막에 id가 "secondItem"인 요소를 추가함.
$("#secondItem").appendTo("#list");
});
$("#thirdBtn").on("click", function() {
// id가 "list"인 요소의 맨 마지막에 id가 "thirdItem"인 요소를 추가함.
$("#thirdItem").appendTo("#list");
});
});
</script>
<body>
<h1>.appendTo() 메소드</h1>
<p>아래 버튼들을 왼쪽에서부터 차례대로 눌러보세요!</p>
<ul id="list">
<li id="firstItem">첫 번째 아이템이에요!</li>
<li id="secondItem">두 번째 아이템이에요!</li>
<li id="thirdItem">세 번째 아이템이에요!</li>
</ul>
<button id="firstBtn">첫 번째 아이템 추가</button>
<button id="secondBtn">두 번째 아이템 추가</button>
<button id="thirdBtn">세 번째 아이템 추가</button>
</body>
4. .prependTo() 메소드
- 선택한 요소를 '해당 요소의 처음'에 삽입
- .prepend() 메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대
<script>
$(function() {
$("button").on("click", function() {
$("<b>새로 추가된 콘텐츠에요!</b>").prependTo(".item");
});
});
</script>
<body>
<h1>.prependTo() 메소드</h1>
<ul>
<li class="item">첫 번째 아이템이에요!</li>
<li class="item">두 번째 아이템이에요!</li>
<li>세 번째 아이템이에요!</li>
</ul>
<button>콘텐츠 추가</button>
</body>▼result
반응형
'프로그래밍 > jQuery' 카테고리의 다른 글
| [제이쿼리] jQuery 기존 요소를 포함하는 요소의 추가(wrap() , wrapAll(), wrapInner()) (0) | 2023.01.25 |
|---|---|
| [제이쿼리] jQuery 요소의 외부에 추가(.before(), .after(), .insertBefore(), insertAfter()) (0) | 2023.01.25 |
| [제이쿼리] jQuery 메소드 체이닝, getter / setter, width() / height(), .attr() 메소드 (2) | 2023.01.24 |
| [제이쿼리] jQuery 선택자 (요소저장, 필터링, input선택자) (0) | 2023.01.24 |
| [제이쿼리] jQuery CSS 선택자를 이용한 HTML 요소 선택 (0) | 2023.01.24 |