如何优雅的用js动态的添加html代码？

Question

如果需要在js里动态的加载一些html代码，一般会选择下面这样的方式
str="亲爱的提示条

Answer 1

把你想要的结构写在HTML里，用一个display：none的标签来包裹，一般而言，会使用：不设置为type="text/javascript"的script标签textarea标签如亲爱的提示条您真的要GG吗？  或亲爱的提示条您真的要GG吗？  使用这些标签，是为了避免这些不被直接使用的标签一被浏览器读取到就被渲染。而且这样做的话，里面的img的src也不会被浏览器自动获取。如果你使用script标签，就可以如下代码得到它：//使用script包裹vartemplate=document.getElementById("theTemplate").innerHTML;//使用textarea包裹vartemplate=document.getElementById("theTemplate").value;使用时textarea时要注意，textarea无法嵌套自身；script标签也无法自嵌套。但如果文档结构是固定的，里面的数据需要动态填充呢？请参考面向数据编程。P.S.对于innerHTML和value的使用可能会造成XSS。动态添加HTML代码，前端若由模板导出，在JS里面写结构，或者在HTML里面写结构，这个结构对于黑客来说都是白盒的，白盒攻击相对简单，黑客可以通过阅读代码来看到哪一些代码可以被利用。比如$用户签名$，发现这里的用户签名是用户可控制的数据之后，黑客可以构造一个之类的用户签名，未经过滤的话，就可以做到XSS。因此，在面向数据编程里讲到的方案中，通过json进行动态匹配替换时，一定要保证后端输出的数据JSON里，等语义敏感的字符正确转义。