jsjq克隆clone加载html
领导说不要在javascript页⾯上看见太多的 +‘<div>'+data[0].id+'</div>‘.....等等追加代码的写法字样；希望能在html页⾯写⼀个模板-然后再⽤js/jq单纯的加载数据；
于是我想到了克隆clone-别问我为什么不⽤vue等等之类的；因为要兼容ie8的；
简单写⼀个clone 例⼦：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
margin: auto;
overflow: auto;
font-size: 16px;
color: #666;
font-family: "Microsoft YaHei", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, "微软雅⿊";  }
ul,
li {
list-style: none;
}
.hide {
display: none;
}
#item {
width: 80%;
margin: 0 auto;clone
border: 1px solid #E1E1E1;
padding: 15px;
}
.tx-c {
text-align: center;
}
.item-list{
border: 1px solid #DDDDDD;
margin: 10px;
padding: 5px;
}
</style>
</head>
<body>
<div class="">
<ul id="item">
<li class="item-list hide">我是模板</li>
</ul>
</div>
</body>
<script type="text/javascript">
var item = [{//模拟数据
var item = [{//模拟数据
'id': "0",
'parentId': '1',
'name': '1'
}, {
'id': "1",
'parentId': '1',
'name': '2'
}, {
'id': "2",
'parentId': '2',
'name': '1'
}];
//简单克隆加载html
$.each(item,function(i,n){
var itemId = $("#item");
var htmlList = itemId.children(":first").clone().removeClass('hide').attr('id',n.id);//克隆添加ID-⽤作填内容      itemId.append(htmlList);
$("#"+n.id).text(n.name);//填⼊内容--多的⼀个⼀个的填进去
})
$("#item").children(":first").remove();//删除原模板
</script>
</html>
好了-写完之后，想⼀想哪些页⾯经常⽤这个；
1.追加html
2.追加输⼊框
这个克隆顾名思义啊--不错的东西-值得使⽤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。