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

Answer 3

js模板字符串帮你解决问题

Answer 4

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

Answer 5

document.body.innerHTML += data;

Answer 6

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">
  小明上学校，天天不迟到！
</p>

</div>`

Answer 7

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">
  小明上学校，天天不迟到！
</p>

</div>`;

$('.ren').append(html);
我不知道你的数据指的是什么，单纯拼接字符串可以这样，有问题可以详细说下

Answer 8

juicer 你值得拥有，拼接HTML像写服务端那么简单。