js/jq克隆clone 加载html

领导说不要在javascript页面上看见太多的 +‘<div>'+data[0].id+'</div>‘.....等等追加代码的写法字样；希望能在html页面写一个模板-然后再用js/jq单纯的加载数据；于是我想到了克隆clone-别问我为什么不用vue等等之类的；因为要兼容ie8的；简单写一个clone 例子：<!DOCTY

虾米博客

2819人浏览 · 2018-03-28 15:34:38

虾米博客 · 2018-03-28 15:34:38 发布

领导说不要在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.追加输入框

这个克隆顾名思义啊--不错的东西-值得使用

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^