JavaScript獲取列表數據後使用ES6快速創建dom樹

在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中的新特性快速創建dom

let dom=''
res.ResultList.forEach((item)=>{
     dom+=`<div class="accountItem">
     <p class="xxx"> ${item.name}-${item.avatar}<span  setId = ${item.UEAID} class="fr accountSetting">設置</span> </p>
     <hr/>
     <p class="diecribeText">${item.describe}</p>
     </div>`
   })
this.$('#accountListRec').append(dom)

okay,就這樣遍歷數據然後使用``直接寫dom即可，有變量的地方用${}替代就ok了~， 其中有操作的地方比如|“設置”, 點擊後直接使用 $(e.target).attr('setId ') 就可以確定和操作了， 是不是很方便