领导说不要在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;
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 = [{//模拟数据
'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.追加输入框
这个克隆顾名思义啊--不错的东西-值得使用