jQuery
jQuery(요소 추가)_2024-07-25
앵보몬
2024. 7. 25. 13:50
728x90
반응형
요소의 추가
제이쿼리는 새로운 요소나 콘텐츠를 손쉽게 추가할 수 있도록 여러 메소드를 제공합니다.
기존 요소의 내부에 추가
다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 추가할 수 있습니다.
1. .append()
2. .prepend()
3. .appendTo()
4. .prependTo()
.append() 메소드
.append() 메소드는 선택한 요소의 '마지막'에 새로운 요소나 콘텐츠를 추가합니다.
예제
$(function() {
$("button").on("click", function() {
$("#list").append("<li>새로 추가된 아이템이에요!</li>");
});
});.prepend() 메소드
.prepend() 메소드는 선택한 요소의 '처음'에 새로운 요소나 콘텐츠를 추가합니다.
예제
$(function() {
$("button").on("click", function() {
$("li").prepend("새로 추가된 콘텐츠에요!");
});
});.appendTo() 메소드
.appendTo() 메소드는 선택한 요소를 '해당 요소의 마지막'에 삽입합니다.
그 동작은 .append() 메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대입니다.
예제
$(function() {
$("#firstBtn").on("click", function() {
// id가 "list"인 요소의 맨 마지막에 id가 "firstItem"인 요소를 추가함.
$("#firstItem").appendTo("#list");
});
});.prependTo() 메소드
.prependTo() 메소드는 선택한 요소를 '해당 요소의 처음'에 삽입합니다.
그 동작은 .prepend() 메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대입니다.
예제
$(function() {
$("button").on("click", function() {
$("<b>새로 추가된 콘텐츠에요!</b>").prependTo(".item");
});
});기존 요소의 내부에 새로운 요소나 콘텐츠를 추가해주는 메소드
| .append() | 선택한 요소의 마지막에 새로운 요소나 콘텐츠를 추가함. |
| .prepend() | 선택한 요소의 처음에 새로운 요소나 콘텐츠를 추가함. |
| .appendTo() | 선택한 요소를 해당 요소의 마지막에 삽입함. |
| .prependTo() | 선택한 요소를 해당 요소의 처음에 삽입함. |
| .html() | 해당 요소의 HTML 콘텐츠를 반환하거나 설정함. |
| .text() | 해당 요소의 텍스트 콘텐츠를 반환하거나 설정함. |
기존 요소의 외부에 추가
다음 메소드를 사용하면 기존 요소의 앞이나 뒤에 새로운 요소나 콘텐츠를 추가할 수 있습니다.
1. .before()
2. .after()
3. .insertBefore()
4. .insertAfter()
.before() 메소드
.before() 메소드는 선택한 요소의 '바로 앞에' 새로운 요소나 콘텐츠를 추가합니다.
예제
$(function() {
$("button").on("click", function() {
// id가 "firstRow"인 요소의 바로 앞에 새로운 <tr>요소를 추가함.
$("#firstRow").before("<tr><td>새로운 행이에요!</td></tr>");
});
});.after() 메소드
.after() 메소드는 선택한 요소의 '바로 뒤에' 새로운 요소나 콘텐츠를 추가합니다.
예제
$(function() {
$("button").on("click", function() {
// id가 "firstRow"인 요소의 바로 뒤에 새로운 <tr>요소를 추가함.
$("#firstRow").after("<tr><td>새로운 행이에요!</td></tr>");
});
});.insertBefore() 메소드
.insertBefore() 메소드는 선택한 요소를 '해당 요소의 앞에' 삽입합니다.
그 동작은 before() 메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대입니다.
예제
$(function() {
$("button").on("click", function() {
// id가 "secondColumn"인 요소의 바로 앞에 새로운 <td>요소를 추가함.
$("<td>새로운 셀이에요!</td>").insertBefore("#secondColumn");
});
});
.insertAfter() 메소드
.insertAfter() 메소드는 선택한 요소를 '해당 요소의 뒤에' 삽입합니다.
그 동작은 .after() 메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대입니다.
예제
$(function() {
$("button").on("click", function() {
// id가 "secondColumn"인 요소의 바로 뒤에 새로운 <td>요소를 추가함.
$("<td>새로운 셀이에요!</td>").insertAfter("#secondColumn");
});
});기존 요소의 외부에 새로운 요소나 콘텐츠를 추가해주는 메소드
| .before() | 선택한 요소의 바로 앞에 새로운 요소나 콘텐츠를 추가함. |
| .after() | 선택한 요소의 바로 뒤에 새로운 요소나 콘텐츠를 추가함. |
| .insertBefore() | 선택한 요소를 해당 요소의 앞에 삽입함. |
| .insertAfter() | 선택한 요소를 해당 요소의 뒤에 삽입함. |
기존 요소를 포함하는 요소의 추가
다음 메소드를 사용하면 기존 요소를 포함하는 새로운 요소나 콘텐츠를 추가할 수 있습니다.
1. .wrap()
2. .wrapAll()
3. .wrapInner()
.wrap() 메소드
.wrap() 메소드는 '선택한 요소'를 포함하는 새로운 요소를 추가합니다.
예제
$(function() {
$("button").on("click", function() {
// class가 "content"인 각 요소를 포함하는 새로운 요소를 추가함.
$(".content").wrap("<div class='wrapper'></div>");
});
});.wrapAll() 메소드
.wrapAll() 메소드는 '선택한 모든 요소'를 포함하는 새로운 요소를 추가합니다.
예제
$(function() {
$("button").on("click", function() {
// class가 "content"인 모든 요소를 포함하는 새로운 요소를 추가함.
$(".content").wrapAll("<div class='wrapper'></div>");
});
});.wrapInner() 메소드
.wrapInner() 메소드는 '선택한 요소에 포함되는' 새로운 요소를 추가합니다.
예제
$(function() {
$("button").on("click", function() {
// class가 "content"인 각 요소에 포함되는 새로운 요소를 추가함.
$(".content").wrapInner("<div class='wrapper'></div>");
});
});
기존 요소를 포함하는 새로운 요소를 추가해주는 메소드
| .wrap() | 선택한 요소를 포함하는 새로운 요소를 추가함. |
| .wrapAll() | 선택한 모든 요소를 포함하는 새로운 요소를 추가함. |
| .wrapInner() | 선택한 요소에 포함되는 새로운 요소를 추가함. |
https://www.tcpschool.com/jquery/jq_elementManupulating_insert
jquery_3.7.1.js
0.28MB
속성가져오기.html
0.00MB
test14.html
0.00MB
속성가져오기.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p><a href="http://daum.net" id="daum">www.daum.net</a></p>
<button id="button1">속성 href value</button>
<button id="button2">append text</button>
<button id="button3">prepend text</button>
<button id="button4" onclick="appendText()">여러개의 새요소 추가</button>
<button id="button5">append list items</button>
<button id="button6">prepend list items</button>
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>
<script>
$(document).ready(function(){
$("#button1").click(function(){
alert($("#daum").attr("href"));
});
$("#button2").click(function(){
$("p").append("<b>이동합니다.</b>");
});
$("#button3").click(function(){
$("p").prepend("<b>다음으로</b>");
});
$("button").click(function(){
alert($("#daum").attr("href"));
});
$("#button5").click(function(){
$("ol").append("<li>appended item</li>");
})
$("#button6").click(function(){
$("ol").prepend("<li>prepend item</li>")
});
});
function appendText(){
var txt1 = "<p>Text.</p>";
var txt2 = $("<p></p>").text("text.");
var txt3 = document.createElement("p");
txt3.innerHTML = "text.";
$("body").append(txt1, txt2, txt3);
}
</script>
</body>
</html>
test14.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<ul>
<li>기존 항목1</li>
<li>기존 항목2</li>
<li>기존 항목3</li>
<li>기존 항목4</li>
</ul>
<img
src="https://cdn.welfarehello.com/naver-blog/production/cjcityblog/2023-07/223150921401/cjcityblog_223150921401_0.png"
alt="jQuery"
width="200"
height="200"
/><br /><br />
<button id="button1">insert before</button>
<button id="button2">insert after</button>
<script>
$(document).ready(function () {
$('li:first-child').after('<li>새 항목 after</li>');
$('li:last-child').before('<li>새 항목 before</li>');
$('li:nth-child(3)').after('<li>새 항목 123</li>');
$("#button1").click(function () {
$("img").before("<b>before</b>");
});
$("#button2").click(function () {
$("img").after("<b>after</b>");
});
});
</script>
</body>
</html>
728x90
반응형