关于js拼接html元素？

Question

<div class="ren"><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">      小明上学校，天天不迟到！    </p></div></div>这一段代码用js应该如何拼接呢？（数据是从json里面获得，我想拼接到前端页面）

Answer 1

你的意思是 小明和 888888这样的学号都是从数据中来的？然后要展现到前端页面中

其实有很多方法：

一. 直接全HTML拼接（你可能想到的方法）

// 假设 有 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 +`上学校，天天不迟到！`+

             `</p>`+

             `</div>`+

             `</div>`

然后把HTMLbank这样的拼接结果输出到页面中合适位置。如果有多段要拼接，就需要把上一段包装到一个函数中，这样可以通过调用函数一下就获得拼接结果，减少编码，例如

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 +`上学校，天天不迟到！`+

             `</p>`+

             `</div>`+

             `</div>`

     return HTMLbank

}

二、采用局部刷新来做

比如在页面中已经有了

<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>上学校，天天不迟到！

    </p>

</div>

</div>

然后有了name和xueID，就可以通过DOM定位id的方法确定到具体的文档元素，然后用实际值去更新来刷新页面达到效果，这里就是查找id为_xm和gc_name的元素，其text内容变成name变量的值，查找id为xhID的元素，其text值用xueID变量值来替换。

三、如果你用了页面模板技术等，还可以根据其模板技术实现方便的内容组装展示，比如利用vue等等的技术来实现。

Answer 2

 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>"

还有个跟简单的，你不考虑兼容或者有用构建工具可以直接用这个

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>`