点击一个div复制里面的某个内容到另一个div中

最新推荐文章于 2023-08-01 18:46:19 发布

新手村常驻居民

最新推荐文章于 2023-08-01 18:46:19 发布

阅读量1.3k

点赞数 1

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/xin_shou_cun/article/details/121033159

版权

这是用两个大的div进行测试，第一个div中有两个小的div，当点击某个小的div的时候，传递点击的div复制到另一个大的div中。并保留之前的div。

（如果不想保留之前的可以搜索 “appendChild()”的方法）

点击时候是不刷新的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>
		
	</title>
	<style>
		#mydiv0{
				border: 1px solid red;
				overflow: auto;
				position: absolute;
				 width: 40%;
				 height: 70%;
		}
		#mydiv1{
			width: 50%;
			height: 20%;
			border: 1px solid red;
			margin-left: 20%;
		}
		#mydiv3{
			width: 50%;
			height: 20%;
			border: 1px solid red;
			overflow: auto;
			margin-left: 20%;
			margin-top: 20%;
			text-align: center;
		}
		#mydiv4{
			width: 50%;
			height: 20%;
			border: 1px solid red;
			margin-left: 20%;
				margin-top: 20%;
		}
		#mydiv5{
			width: 50%;
			height: 20%;
			border: 1px solid red;
			margin-left: 20%;
			margin-top: 20%;
		}
		#mydiv6{
			width: 50%;
			height: 20%;
			border: 1px solid red;
			margin-left: 20%;
				margin-top: 20%;
		}
	</style>
</head>
<body>
<div id="mydiv0">
<div class="" id="mydiv1" >点击传递
	<div  style="margin-left: 20px; width: 30px;height: 30px;border: 1px solid red;">123</div>
</div>

<div   id="mydiv3">居中<br/>居中<br/>居中<br/>居中<br/>居中<br/>居中<br/>居中<br/></div>
</div>


<div id="mydiv2" style=" position: absolute;left:56%; width: 40%;height: 70%; border: 1px solid red;">

</div>
</body>
<script type="text/javascript" src="../../js/jquery-3.4.1.min.js" charset="UTF-8"></script>
	<script>
		
	
			  $( function(){
           $("#mydiv1").click( function(event){
           //因为会出现重复的效果，点击后要清空，然后在进行复制
           		$("#mydiv2").empty();
             $("#mydiv1").clone( true).appendTo("#mydiv2");  
           })
       });
		
			  $( function(){
           $("#mydiv3").click( function(event){
              //因为会出现重复的效果，点击后要清空，然后在进行复制
           	$("#mydiv2").empty();
             $("#mydiv3").clone( true).appendTo("#mydiv2");  
           })
        })
	</script>
</html>

新手村常驻居民

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
点击一个div复制里面的某个内容到另一个div中

这是用两个大的div进行测试，第一个div中有两个小的div，当点击某个小的div的时候，传递点击的div复制到另一个大的div中。并保留之前的div。（如果不想保留之前的可以搜索 “appendChild()”的方法）点击时候是不刷新的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title> </title> <sty
复制链接

扫一扫