关于js生成dom的问题

Question

想问一下大家从后台获取数据后是怎么用js生成dom的, 是直接把dom写成字符串然后添加到对应位置, 还是用js函数 createEmement ,appendChild等函数逐层生成的 . 如果逐层生成, dom 比较复杂的话会不会很麻烦, 如果写成一个字符串, 如
var html = '<div> + content + <div>',
如果content中有单引号怎么搞.

还是有其它好用的工具或方法.

问题比较基础, 望指教.

Answer 1

用innerHTML吧。这个效率高但是安全性低，可能会导致xss（脚本注入攻击）.用appendChild安全性高，数据比较多的话，可以createDocumentFragment,创建一个文档碎片，把需要渲染的DOM先插入这个碎片中，然后一次性，把文档碎片插入到想要插入的地方。

Answer 2

我一般是弄成字符串，因为方便嘛。但是如果有很多数据的话建议弄下模板引擎。
那个单引号就写成双引号就行了。

Answer 3

我写了一个不到1kb的模板引擎
https://github.com/lloydzhou/tplite