0
点赞
收藏
分享

微信扫一扫

Nearth===>WEB前端--第24课/JQuery/动态清空元素以及复制元素6(empty(),clone(),append())


小提示:这个代码可以帮助我们学习如何清空数据以及复制数据···········

代码学习:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
body{
background-image: url(0.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
div{
width: 200px;
height: 200px;
background-color: red;
margin-top: 20px;
}
</style>
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#dv").html("");//清空元素中的内容
/* $("#dv").empty();//清空元素中内容 */
/* $("#dv").remove();//移除元素自身--自杀 */
});
$("#btn2").click(function(){
var spanObj=$("#dv>span").clone();//克隆,复制了这个元素
spanObj.css("fontSize","12px");
$("#dv2").append(spanObj);
});
});
</script>
</head>
<body>
<h1>删除数据以及复制数据的方法学习(html(""),empty().remove(),clone(),append())</h1>
<hr >
<input type="button" name="" id="btn1" value="显示效果" />
<input type="button" name="" id="btn2" value="显示效果" />
<hr >
<div id="dv">
<span>今天天气真好啊·····一起聊会儿····</span>
</div>
<div id="dv2"></div>
</body>
</html>

趁年轻,多多折腾自己的青春·························

举报

相关推荐

0 条评论