js拼接html

项目中我们经常需要用js来拼接html,于此同时我们也会经常拼写错误，今天就来给大家总结一下，怎么拼写才不容易出错。

1.把我们需要拼接的html先在页面里面写好

 <li class="listIteam" onclick='changeId("标题")'>标题</li>

2.观察这个html内容用的是单引号（' '）多，还是双引号(" ")多，如果用的单引号多，我们就用双引号把这段html内容括起来，同时对html里面的双引号进行转义。同理，如果用的双引号多，我们就用单引号把这段html内容括起来，同时对html内容里面的单引号进行转义，（转义的理由就不多说了，是为了避免解析的时候发生歧义）上述代码，我们用的双引号比较多，那我们就用单引号来把这段html内容括起来。

 '<li class="listIteam" onclick='changeId("标题")'>标题</li>'

• 此时我们看到编辑器有报错,其实也是我们下一步要解决的问题：

错误提示

3.对html内容里面的''进行转义，除了开头和结尾的两个''不用转义之外，其他的都需要在''的前面增加一个\进行转义:

'<li class="listIteam" onclick=\'changeId("标题")\'>标题</li>'

4.对html需要用js变量来填充的地方进行html字符串的切割：在需要用变量来显示内容的前后各增加一个'+',假如此html里面的changeId函数的参数和li标签的innerhtml需要用js来填充，那我们就需要在changeId函数的参数值和li标签的innerhtml的内容前后各增加一个'+'

'<li class="listIteam" onclick=\'changeId("'+'标题'+'")\'>'+'标题'+'</li>'

5.把需要用js来填充的内容，全部替换成对应的js变量，包括内容前后部分的''：

'<li class="listIteam" onclick=\'changeId("'+iteams[i].title+'")\'>'+iteams[i].title+'</li>'

• 打开页面看一下效果：

页面显示效果

我们看到页面数据正常渲染出来，事件也可以正常执行。到此一个简单的js拼接字符串的方法已经完成，总结下来就是一步一步的来，才不会出错。