关于Html5的新元素的模板复用

前两天被老师叫过去让我写一个类似于云之家软件中的智能审批页面,
其中有一部分是当点击一个按钮时,出现一个请假明细.由于本人比较笨,
所以做开始使用拼接的方式做的,代码非常的多.说句实话连我自己丢不想看
,调试起来还异常的麻烦.

EX:var node = '<div class="holiday">' + '请假信息(1)' +
// 						'<span style="color: red;">*</span>' +
// 						'<span  id="del" class = "shanchu" onclick="cutoff()" > ' + '删除 ' +
// 						'</span></div><div class="mui-card-content">' +
// 						'<ul id="xiangqing" class="mui-table-view"><li>' +
// 						' <div class="qingjialeixing" >' +
// 						'<a><span class="mui-icon mui-icon-forward" ></span></a>' +
// 						'<span>' +
// 						' 请假类型' +
// 						'<span style="color: red;">*</span></span>' +
// 						'<input type="text"  placeholder="请输入"  /></div>' +
// 						'<div class="kaishishijian" >' +
// 						'<a><span class="mui-icon mui-icon-forward"></span></a>' + '<span>' +
// 						' 开始时间 ' +
// 						'<span style="color: red;">*</span></span>' +
// 						'<input type="text"  placeholder="请输入" /></div>' +
// 						'<div class="jieshushijian" >' +
// 						'<a><span class="mui-icon mui-icon-forward" ></span></a><span>' +
// 						' 结束时间' +
// 						'<span style="color: red;">*</span></span>' +
// 						'<input type="text"  placeholder="请输入" />' +
// 						'</div><div class="qingjiatianshu" ><span>' +
// 						' 请假天数' +
// 						'<span style="color: red;">*</span></span>' +
// 						'<input type="text"  placeholder="请输入"  />' +
// 						'</div><div class="shichang"><span>' +
// 						' 时长(小时)' +
// 						'<span style="color: red;">*</span></span>' +
// 						'<input type="text"placeholder="请输入"  /></div>' +
// 						'<div class="zongtianshu"><div class="sunall">' +
// 						'请假总天数' + '<span>' +
// 						0.00 + '</span>' + '<div>' +
// 						'请假总天数' + '<span>' +
// 						0.00 + '</span></div></div></div></li></ul></div></div>'
// 					var dom = document.getElementById('demo');
// 					var temp = document.createElement('div');
// 					temp.style = temp.classList.add('qingjialeixing');
// 					temp.innerHTML = node;
// 					dom.appendChild(temp);

毫无疑问的是,我的方案被否定了,然后老师跟我说你去搜一下那个模板复用,然后就开始了我的一天的百度之路.各路浏览器开始一路疯狂的搜索.印象里出现最多的是一个{{}}
这个样子的,不过感觉好复杂.然后抛弃.最后还是选择了一个比较接地气的方式.

js代码如下
function tian() {
document.getElementById('btn').addEventListener("click", function() {

//获取template的节点
let zan = document.getElementById('deliveryCard');
//不知道?
let x = zan.content;
//导入节点x
let clone = document.importNode(x);
//将x节点接入到body内容的下面
document.body.appendChild(x);
}, false);
}

Html 的代码如下:
<template id="deliveryCard">
<div class="all">
<span>项目名称</span>
<input type="text" placeholder="请输入" title="{{title}}" />
</div>
<div class="all">
<span>项目类型</span>
<input type="text" placeholder="请输入" title="{{title}}" />
</div>
<div class="all">
<span>甲方</span>
<input type="text" placeholder="请输入" title="{{title}}" />
</div>
<div class="all">
<span>乙方</span>
<input type="text" placeholder="请输入" title="{{title}}" />
</div>
<div class="all">
<span>站点</span>
<input type="text" placeholder="请输入" title="{{title}}" />
</div>

</template>
最后来一张效果图好了

希望能1帮到有需要的人.

• 点赞
• 收藏
• 分享
• 文章举报