本文总结了在JavaScript中拼接HTML时如何避免错误的步骤：1) 根据引号使用频率选择包围字符串的引号并转义；2) 对内容中的进行转义；3) 切割字符串以插入变量；4) 使用变量替换内容。通过这些方法，可以确保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拼接字符串的方法已经完成，总结下来就是一步一步的来，才不会出错。
扫一扫
5184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
