關(guān)于js拼接html元素？

《ECMAScript 6 入門》#模板字符串 By 阮一峰

document.body.innerHTML += data;

juicer 你值得擁有，拼接HTML像寫服務(wù)端那么簡(jiǎn)單。

js模板字符串幫你解決問題

let html=`<div class="tu">

<img src="./image/xiaoming.png" alt="person">

</div>
<div class="grxx">

<p class="xm">小明</p>
<p class="xh"><i class="xuehao"></i>888888</p>
<p class="gc">
  小明上學(xué)校，天天不遲到！
</p>

</div>`

let html=`<div class="tu">

<img src="./image/xiaoming.png" alt="person">

</div>
<div class="grxx">

<p class="xm">小明</p>
<p class="xh"><i class="xuehao"></i>888888</p>
<p class="gc">
  小明上學(xué)校，天天不遲到！
</p>

</div>`;

$('.ren').append(html);
我不知道你的數(shù)據(jù)指的是什么，單純拼接字符串可以這樣，有問題可以詳細(xì)說下

你的意思是 小明和 888888這樣的學(xué)號(hào)都是從數(shù)據(jù)中來的？然后要展現(xiàn)到前端頁面中
其實(shí)有很多方法：
一. 直接全HTML拼接（你可能想到的方法）

// 假設(shè) 有 name 和 xueID 分別代表名字和學(xué)號(hào)的變量
var HTMLbank='<div class="ren">`+
             `<div class="tu"><img src="./image/xiaoming.png" alt="person"></div>`+
             `<div class="grxx">`+
             `<p class="xm">`+name +`</p>`+
             `<p class="xh"><i class="xuehao"></i>`+xueID +`</p>`+
             `<p class="gc">`+
             name +`上學(xué)校，天天不遲到！`+
             `</p>`+
             `</div>`+
             `</div>`

然后把HTMLbank這樣的拼接結(jié)果輸出到頁面中合適位置。如果有多段要拼接，就需要把上一段包裝到一個(gè)函數(shù)中，這樣可以通過調(diào)用函數(shù)一下就獲得拼接結(jié)果，減少編碼，例如

function PJHTMLren( name , xueID){
    var HTMLbank='<div class="ren">`+
             `<div class="tu"><img src="./image/xiaoming.png" alt="person"></div>`+
             `<div class="grxx">`+
             `<p class="xm">`+name +`</p>`+
             `<p class="xh"><i class="xuehao"></i>`+xueID +`</p>`+
             `<p class="gc">`+
             name +`上學(xué)校，天天不遲到！`+
             `</p>`+
             `</div>`+
             `</div>`
     return HTMLbank
}

二、采用局部刷新來做
比如在頁面中已經(jīng)有了

<div class="ren">
<div class="tu">
    <img src="./image/xiaoming.png" alt="person">
</div>
<div class="grxx">
    <p class="xm"><span id="_xm"></span></p>
    <p class="xh"><i class="xuehao"></i><span id="xhID"></span></p>
    <p class="gc">
      <span id="gc_name"></span>上學(xué)校，天天不遲到！
    </p>
</div>
</div>

然后有了name和xueID，就可以通過DOM定位id的方法確定到具體的文檔元素，然后用實(shí)際值去更新來刷新頁面達(dá)到效果，這里就是查找id為_xm和gc_name的元素，其text內(nèi)容變成name變量的值，查找id為xhID的元素，其text值用xueID變量值來替換。

三、如果你用了頁面模板技術(shù)等，還可以根據(jù)其模板技術(shù)實(shí)現(xiàn)方便的內(nèi)容組裝展示，比如利用vue等等的技術(shù)來實(shí)現(xiàn)。

  var html = "<div class='ren'>" +
      "<div class='tu'>" +
        "<img src='" + data.tu +"' alt='person'>" +
      "</div>" +
      "<div class='grxx'>" +
        "<p class='xm'>" + data.xm+ "</p>" +
        "<p class='xh'><i class='xuehao'></i>" + data.xuehao + "</p>" +
        "<p class='gc'>" + data.gc + "</p>" +
      "</div>" +
    "</div>"

還有個(gè)跟簡(jiǎn)單的，你不考慮兼容或者有用構(gòu)建工具可以直接用這個(gè)

let html = `<div class='ren'>
    <div class='tu'>
      <img src='${data.tu}' alt='person'>
    </div>
    <div class='grxx'>
      <p class='xm'>${data.xm}</p>
      <p class='xh'><i class='xuehao'></i>${data.xh}</p>
      <p class='gc'>${data.gc}</p>
    </div>
  </div>`