关于js拼接html元素?

<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里面获得,我想拼接到前端页面)


ITMISS
浏览 423回答 2
2回答

达令说

你的意思是 小明和 888888这样的学号都是从数据中来的?然后要展现到前端页面中其实有很多方法:一. 直接全HTML拼接(你可能想到的方法)// 假设 有 name 和 xueID 分别代表名字和学号的变量var HTMLbank='<div class="ren">`+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;`<div class="tu"><img src="./image/xiaoming.png" alt="person"></div>`+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;`<div class="grxx">`+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;`<p class="xm">`+name +`</p>`+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;`<p class="xh"><i class="xuehao"></i>`+xueID +`</p>`+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;`<p class="gc">`+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;name +`上学校,天天不迟到!`+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;`</p>`+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;`</div>`+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;`</div>`然后把HTMLbank这样的拼接结果输出到页面中合适位置。如果有多段要拼接,就需要把上一段包装到一个函数中,这样可以通过调用函数一下就获得拼接结果,减少编码,例如function PJHTMLren( name , xueID){&nbsp; &nbsp; var HTMLbank='<div class="ren">`+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;`<div class="tu"><img src="./image/xiaoming.png" alt="person"></div>`+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;`<div class="grxx">`+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;`<p class="xm">`+name +`</p>`+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;`<p class="xh"><i class="xuehao"></i>`+xueID +`</p>`+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;`<p class="gc">`+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;name +`上学校,天天不迟到!`+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;`</p>`+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;`</div>`+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;`</div>`&nbsp; &nbsp; &nbsp;return HTMLbank}二、采用局部刷新来做比如在页面中已经有了<div class="ren"><div class="tu">&nbsp; &nbsp; <img src="./image/xiaoming.png" alt="person"></div><div class="grxx">&nbsp; &nbsp; <p class="xm"><span id="_xm"></span></p>&nbsp; &nbsp; <p class="xh"><i class="xuehao"></i><span id="xhID"></span></p>&nbsp; &nbsp; <p class="gc">&nbsp; &nbsp; &nbsp; <span id="gc_name"></span>上学校,天天不迟到!&nbsp; &nbsp; </p></div></div>然后有了name和xueID,就可以通过DOM定位id的方法确定到具体的文档元素,然后用实际值去更新来刷新页面达到效果,这里就是查找id为_xm和gc_name的元素,其text内容变成name变量的值,查找id为xhID的元素,其text值用xueID变量值来替换。三、如果你用了页面模板技术等,还可以根据其模板技术实现方便的内容组装展示,比如利用vue等等的技术来实现。

动漫人物

&nbsp;var html = "<div class='ren'>" +&nbsp; &nbsp; &nbsp; "<div class='tu'>" +&nbsp; &nbsp; &nbsp; &nbsp; "<img src='" + data.tu +"' alt='person'>" +&nbsp; &nbsp; &nbsp; "</div>" +&nbsp; &nbsp; &nbsp; "<div class='grxx'>" +&nbsp; &nbsp; &nbsp; &nbsp; "<p class='xm'>" + data.xm+ "</p>" +&nbsp; &nbsp; &nbsp; &nbsp; "<p class='xh'><i class='xuehao'></i>" + data.xuehao + "</p>" +&nbsp; &nbsp; &nbsp; &nbsp; "<p class='gc'>" + data.gc + "</p>" +&nbsp; &nbsp; &nbsp; "</div>" +&nbsp; &nbsp; "</div>"还有个跟简单的,你不考虑兼容或者有用构建工具可以直接用这个let html = `<div class='ren'>&nbsp; &nbsp; <div class='tu'>&nbsp; &nbsp; &nbsp; <img src='${data.tu}' alt='person'>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class='grxx'>&nbsp; &nbsp; &nbsp; <p class='xm'>${data.xm}</p>&nbsp; &nbsp; &nbsp; <p class='xh'><i class='xuehao'></i>${data.xh}</p>&nbsp; &nbsp; &nbsp; <p class='gc'>${data.gc}</p>&nbsp; &nbsp; </div>&nbsp; </div>`
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript