<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- CDN으로 jQuery 라이브러리 연결하기 - https://cdnjs.com/libraries/jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
img{width: 400px; height:100px; }
ul, li{
list-style-type:none; margin:0; padding:0;
border:1px solid gray; float:left; margin:10px; padding:5px;
}
</style>
</head>
<body>
<ul>
<li id="i"><img src ="../img/swisda.jpg" /></li>
</ul>
<script>
$(function(){
//객체 조작
//before() : 선택자 이전에 객체를 추가한다
$("#i").before("<li><img src='../img/jeju.png' />")
//insertBefore() : 선택자 이전에 객체추가. 내용.insertBefore()
$("<li><img src='../img/natural04.png'</li>").insertBefore("#i")
$("#i").after("<li><img src='../img/blueButton.png' /></li>")
//insertAfter() :선택자 다음에 객체 추가
$("<li><img src='../img/SeoulLogo.jpg' /></li>").insertAfter("#i")
//append() : 선택자의 자손으로 제일 마지막에 추가
$("ul").append("<li><img src='../img/SeoulLogo.jpg' /></li>")
//appendTo() : 선택자의 자손으로 제일 마지막에 추가
$("<li>appendTo</li>").appendTo("ul")
//prepend() : 선택자의 자손중 제일앞에 추가
$("ul").prepend("<li><img src='../img/gmap_pin.png'></li>")
//prependTo() :선택자의 자손중 제일앞에 추가
$("<li><img src='../img/gmap_pin.png'></li>").prependTo("ul")
//clone() : 선택자 객체 복사, 사용은 한 번만 가능하다.
var cloneObject = $("#i").clone();
cloneObject.attr('id', 'copy')//아이디 변경
$('ul').append(cloneObject);
//empty() : 내용만 지운다.
$("#copy").empty();
// remove(): 선택자와 내용이 지워진다.
$("#i").remove();
})
</script>
</body>
</html>
풀스택eDot