211001_clone,append
<!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>
