JavaScript获取列表数据后使用ES6快速创建dom树-CSDN博客

本文链接：https://blog.csdn.net/kirinlau/article/details/101268654

在js中，经常会有获取到数据后批量渲染的需求，比如一个select的option,或者button group，又或者block块列表等等，这些数据都是从服务端请求获取到的，所以不得不拿到数据后然后进行创建dom，传统的的es5做法就是：

var divItem= document.getElementById("div");
//文本节点
var textNode = document.createTextNode("你获取到要显示的内容");   /
//创建元素节点
var pitem= document.createElement("p"); 
//文本节点添加到li元素节点中去
pitem.appendChild(textNode); 
//将p添加到ul中去
divItem.appendChild(liEle);

当然这仅仅是一个基础的dom节点实现，你需要遍历创建，还需要新增class等属性等其他操作, 拼凑字符串需要+’'以及变量名，当然可以使用JQuery来创建添加节点的话可以使用chain操作会方便一点的话，但是仍然需要使用js来完成其中的每一步。
es6中新增的撇号`` 给变成带来了极大的方便，尤其是需要大量的字符串拼接的代码片，
下面来看一下ES6中的新特性快速创建dom

let dom=''
res.ResultList.forEach((item)=>{
     dom+=`<div class="accountItem">
     <p class="xxx"> ${item.property}-${item.property}<span  setId = ${item.xxx} class="myclass">设置</span> </p>
     <hr/>
     <p class="diecribeText">${item.describe}</p>
     </div>`
   })
this.$('#divdom').append(dom)

okay,就这样遍历数据然后使用``直接写dom即可，有变量的地方用${}替代就ok了~，其中有操作的地方比如|“设置”, 点击后直接使用 $(e.target).attr('setId ') 就可以确定和操作了，是不是很方便