关于Jquery数据的克隆和写入

一，对比

对比原生的繁琐写入数据的方法，jquery在这方面优化了很多，它可以将一段数据先克隆，然后将这段数据再复制动态的写入到页面中，简化了很多代码。

二， 克隆

克隆节点是DOM的常见操作，jQuery提供一个clone方法，专门用于处理dom的克隆。
.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了。

<div></div>
<script type="text/javascript">
$('div').on('click' , function(){
            $('div').clone();//只克隆了结构，事件丢失
            $('div').clone(true);//结构、事件与数据都克隆
        })
</script>

最后关于两点：1，clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容；2，clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据。

三，写入数据（data)

通过 data() 函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将被移除。
但是好在可以通过.clone()配合data可以完成动态的写入数据

下面是一个案例：

<ul class="ul1">
	<li class="list"><span class="box"></span><a href="#"></a><span></span></li>	
</ul>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript">
var hotlist = [
    {
    	title : '全球新冠肺炎确诊病例超500万',
    	hotnum : 483,
    	id : 1
    },{
    	title : '全国政协十三届三次会议闭幕时间',
    	hotnum : 466,
    	id : 2
    },{
    	title : '520民政局爆满',
    	hotnum : 449,
    	id : 3
    }
    ,{
    	title : '王思聪评论罗志祥',
    	hotnum : 434,
    	id : 4
    }]
hotlist.forEach(function(ele, index) {
    	var oClone = $('.list').clone().removeClass('list');
    	oClone.data({
    		title : ele.title,
    		hotnum : ele.hotnum,
    		id : ele.id
    	}).find('span')
    	      .text(ele.id )
    	      .next().text(ele.title)
    	      .next().text(ele.hotnum + '万')
    	$('.ul1').append(oClone);
});
</script>