반응형
기존 요소의 외부에 새로운 요소나 콘텐츠를 추가해주는 메소드
| 메소드 | 설명 |
| .before() | 선택한 요소의 바로 앞에 새로운 요소나 콘텐츠를 추가함. |
| .after() | 선택한 요소의 바로 뒤에 새로운 요소나 콘텐츠를 추가함. |
| .insertBefore() | 선택한 요소를 해당 요소의 앞에 삽입함. |
| .insertAfter() | 선택한 요소를 해당 요소의 뒤에 삽입함. |
1. .before() 메소드
선택한 요소의 '바로 앞에' 새로운 요소나 콘텐츠를 추가
<script>
$(function(){
$("button").on("click", function(){
$("#list").before("<li>음식</li>")
});
});
</script>
<body>
<h1>.before() 메소드</h1>
<ul id="list">
<li> 햄버거 </li>
<li> 피자 </li>
<li> 김치찌개 </li>
</ul>
<button>아이템 추가</button>
</body>▼ result
2. after() 메소드
선택한 요소의 '바로 뒤에' 새로운 요소나 콘텐츠를 추가
<script>
$(function(){
$("button").on("click", function(){
$("#list").after("<li>아이템추가용</li>")
});
});
</script>
<body>
<h1>.after() 메소드</h1>
<ul id="list">
<li> 햄버거 </li>
<li> 피자 </li>
<li> 김치찌개 </li>
</ul>
<button>아이템 추가</button>
</body>▼ result
3. insertAfuer() 메소드
선택한 요소를 '해당 요소의 뒤에' 삽입
.after()메소드와 같지만, 소스와 타겟의 위치가 서로 반대
<script>
$(function(){
$("button").on("click", function(){
$("<li>insertBefore 추가</li>").insertBefore("#test");
});
});
</script>
<body>
<h1>.insertBefore 메소드</h1>
<ul id="list">
<li> 햄버거 </li>
<li> 피자 </li>
<li id="test"> 김치찌개 </li>
</ul>
<button>아이템 추가</button>
</body>▼ result
4. inserAfter() 메소드
선택한 요소를 '해당 요소의 뒤에' 삽입
.after() 메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대
<script>
$(function(){
$("button").on("click", function(){
$("<li>insertBefore 추가</li>").insertAfter("#test");
});
});
</script>
<body>
<h1>.insertAfter() 메소드</h1>
<ul id="list">
<li> 햄버거 </li>
<li> 피자 </li>
<li id="test"> 김치찌개 </li>
</ul>
<button>아이템 추가</button>
</body>▼ result
반응형
'프로그래밍 > jQuery' 카테고리의 다른 글
| [제이쿼리] jQuery와 Ajax (0) | 2023.01.25 |
|---|---|
| [제이쿼리] jQuery 기존 요소를 포함하는 요소의 추가(wrap() , wrapAll(), wrapInner()) (0) | 2023.01.25 |
| [제이쿼리] jQuery 요소의 내부에 추가 (append, prepend, appendTo, prependTo) (0) | 2023.01.24 |
| [제이쿼리] jQuery 메소드 체이닝, getter / setter, width() / height(), .attr() 메소드 (2) | 2023.01.24 |
| [제이쿼리] jQuery 선택자 (요소저장, 필터링, input선택자) (0) | 2023.01.24 |