-
211001_clone,appendJQuery 2021. 10. 1. 14:43
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<button type="button" id="btn1">1번 영역을 복사해서 3번 영역에 추가</button>
<button type="button" id="btn2">2번 영역을 복사해서 4번 영역에 추가</button>
<button type="button" id="btn3">3,4번 영역 지우기</button>
<hr>
<div id="box1">
<b>1번 박스</b>
<img alt="" src="../image/c1.png">
<img alt="" src="../image/c2.png">
</div>
<div id="box2">
<b>2번 박스</b>
<img alt="" src="../image/c3.png">
<img alt="" src="../image/c4.png">
</div>
<div id="box3">
<b>3번 박스</b>
</div>
<div id="box4">
<b>4번 박스</b>
<script type="text/javascript">
<!--1번버튼 클릭시 3번에 복사 -->
$("#btn1").click(function() {
//box1 아래의 모든 img태그 복사
var no1=$("#box1").find("img").clone();
//3번 영역에 추가
$("#box3").append(no1);
});
<!--2번버튼 클릭시 4번에 복사 -->
$("#btn2").click(function() {
//box1 아래의 모든 img태그 복사
var no2=$("#box2").find("img").clone();
//3번 영역에 추가
$("#box4").append(no2);
});
//3번..remove
$("#btn3").click(function() {
$("#box3").find("img").remove();
$("#box4").find("img").remove();
});
</script>
</body>
</html>
초기화면 --> 3,4번 박스 추가 'JQuery' 카테고리의 다른 글
211001_each,append,after (0) 2021.10.01 211001_div,check,radio (0) 2021.10.01 211001_list,select,contains (0) 2021.10.01 211001_div,mouseover,mouseout,empty,hover (0) 2021.10.01 211001_table,button,click,score (0) 2021.10.01