🐧태그(Element 객체)의 추가와 삭제

📌$(tag) : HTML 태그를 전달받아 jQuery 객체를 반환 - 태그(Element 객체) 생성

◈ [$변수명] 형식으로 jQuery 객체를 저장한 변수를 표현 - jQuery 메소드 호출

var $image=$("<img src='images/1.png' width='200'>");

🌠$(selector).appendTo(targetSelector) : 선택자로 태그를 검색하여 타겟 선택자의 태그의 마지막 자식 태그로 추가하는 메소드 - 태그 이동

$image.appendTo($("#imageList1"));
$("<img src='images/2.png' width='200'>").appendTo($("#imageList1"));

※ 2번 이미지는 변수 선언 없이 출력
─────────────────────────────────────

🌠$(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 img[src='images/1.png']").after("<img src='images/6.png'width='200'>");

─────────────────────────────────────

🌠$(selector).remove([selector]) : 선택자로 검색된 태그(Element 객체)를 삭제하는 메소드

→ remove 메소드의 매개변수에 선택자를 전달하여 특정 태그만 선택하여 삭제 가능

$("#imageList3").remove();//선택된 태그의 후손태그도 삭제

─────────────────────────────────────

$("#imageList3").children(":eq(0)").remove();

─────────────────────────────────────

//$("#imageList3").children().eq(1).remove();
$("#imageList3").children().remove(":eq(1)");

🐧태그(Element 객체)의 이동

📌새로운 태그(Element 객체)를 생성하여 선택자로 검색된 태그에 추가하는 메소드

→ append, prepend, before, after

for(i=0;i<=9;i++) {
	$("#imageDiv").append("<img src='images/"+i+".png' width='150'>");
}

📌선택자로 검색된 태그를 타겟 선택자로 검색된 태그에 이동하는 메소드

→ appendTo, prependTo, insertBefore, insertAfter
→ 새로운 태그를 생성하여 이동 가능

setInterval(function() {
	$("#imageList").children(":eq(0)").appendTo($("#imageDiv"));
}, 1000);

※ 1초마다 첫번째 이미지가 마지막으로 이동(무한반복)