태그의 추가와 삭제
[html 태그]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>태그의 추가와 삭제</h1>
<hr>
<div id="imageList1"></div>
<hr>
<div id="imageList2"></div>
<hr>
<div id="imageList3">
<img alt="숫자이미지" src="images/1.png" width="200" id="img1">
<img alt="숫자이미지" src="images/2.png" width="200" id="img2">
<img alt="숫자이미지" src="images/3.png" width="200" id="img3">
</div>
</body>
</html>
태그 이동
$(tag) : jQuery 함수의 매개변수로 HTML 태그를 전달받으면 자바스크립트의 Node(Element) 객체를 생성하여 제공받아 jQuery 객체로 반환
$(selector).appendTo(targetselector) : 선택자로 태그를 검색하여 타겟 선택자로 검색된 태그의 마지막 자식 태그로 이동하는 메소드
→ 기존 태그를 검색하여 이동하는 메소드이지만 태그를 생성하여 이동 처리하는 것도 가능하다.
$("<img src='images/1.png' width='200'>").appendTo("#imageList1");
$("<img src='images/2.png' width='200'>").appendTo("#imageList1");
$(selector).prependTo(targetselector) : 선택자로 태그를 검색하여 타겟 선택자로 검색된 태그의 첫번째 자식 태그로 이동하는 메소드
→ 기존 태그를 검색하여 이동하는 메소드이지만 태그를 생성하여 이동 처리하는 것도 가능하다.
$("<img src='images/3.png' width='200'>").prependTo("#imageList1");
$("<img src='images/4.png' width='200'>").prependTo("#imageList1");
$(selector).insertBefore(targetselector) : 선택자로 태그를 검색하여 타겟 선택자로 검색된 태그의 이전 태그로 이동하는 메소드
→ 기존 태그를 검색하여 이동하는 메소드이지만 태그를 생성하여 이동 처리하는 것도 가능하다.
$("<img src='images/5.png' width='200'>").insertBefore("#imageList1 img[src='images/1.png']");
$(selector).insertAfter(targetselector) : 선택자로 태그를 검색하여 타겟 선택자로 검색된 태그의 다음 태그로 이동하는 메소드
→ 기존 태그를 검색하여 이동하는 메소드이지만 태그를 생성하여 이동 처리하는 것도 가능하다.
$("<img src='images/6.png' width='200'>").insertAfter("#imageList1 img[src='images/1.png']");
태그 추가(삽입)
$(selector).append(newItem) : 선택자로 검색된 태그의 마지막 자식 태그로 새로운 태그를 추가하는 메소드
$("#imageList2").append("<img src='images/1.png' width='200'>");
$("#imageList2").append("<img src='images/2.png' width='200'>");
$(selector).prepend(newItem) : 선택자로 검색된 태그의 첫번째 자식태그로 새로운 태그를 추가(삽입)하는 메소드
$("#imageList2").prepend("<img src='images/3.png' width='200'>");
$("#imageList2").prepend("<img src='images/4.png' width='200'>");
$(selector).before(newItem) : 선택자로 검색된 태그의 이전 태그로 새로운 태그를 추가(삽입)하는 메소드
$("#imageList2 img[src='images/1.png']").before("<img src='images/5.png' width='200'>");
$(selector).after(newItem) : 선택자로 검색된 태그의 다음 태그로 새로운 태그를 추가(삽입)하는 메소드
$("#imageList2").find("img[src='images/1.png']").after("<img src='images/6.png' width='200'>");
태그 삭제
$(Selector).remove([selector]) : 선택자로 검색된 태그를 삭제하는 메소드
→ remove() 메소드의 매개변수에 선택자를 전달하여 특정 태그만을 선택하여 삭제가 가능하다.
$("#imageList3").remove();//부모 태그를 삭제하면 자식태그도 삭제된다.
특정 자식 태그만 삭제하고 싶은 경우
ex) 2번째 이미지만 삭제
$("#imageList3").children(":eq(1)").remove();
$("#imageList3").children().eq(1).remove();
$("#imageList3").children().remove(":eq(1)");
$("#img2").remove();//id 선택자를 이용해 삭제하는 것이 가장 편하다.
태그의 이동
[html 태그]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>태그 이동</h1>
<hr>
<div id="imageList"></div>
</body>
</html>선택자로 검색된 태그에 새로운 태그를 추가(삽입)하는 메소드
→ append(), prepend(), before(), after()
for(i=0;i<10;i++) {
$("#imageList").append("<img src='images/"+i+".png' width='150'>");
}
선택자로 검색된 태그를 타겟 태그로 이동하는 메소드
→ aapendTo(), prependTo(), insertBefore(), insertAfter()
setInterval(function() {
$("#imageList").children(":eq(0)").appendTo("#imageList");
}, 1000);
'학원 > 복기' 카테고리의 다른 글
| [jQuery] 마우스(mouse) 이벤트 / 키(key) 이벤트 / 스크롤(scroll) 이벤트 (0) | 2023.06.14 |
|---|---|
| [jQuery] Event Handle (0) | 2023.06.13 |
| [jQuery] 메소드 (each, css, text, html) (0) | 2023.06.12 |
| [jQuery] 선택자(Selector) (0) | 2023.06.12 |
| [jQuery] jQuery란? / jQuery 라이브러리 이용법 (0) | 2023.06.12 |
