javascript - 动态生成dom的时候除了字符串拼接还有什么好办法？

Question

就比如要动态生成一个导航条，里面没有动态数据。但是就是太长了，所以在编辑器里为了换行就才用字符串拼接的方法。

Answer 1

既然没有动态数据，为什么不考虑写死在页面里？

Answer 2

用reactjs吧，直接生成DOM效率不高。或者把DOM内容做成隐藏层，要用的时候从隐藏提取。就是不应该拼接，可读性太差了。

Answer 3

直接使用模板引擎渲染啊

Answer 4

这时候你应该考虑前端模版

<script type="text/tpl" id="nav-tpl">
<p id="nav">
...
</p>
</script>
<script>
(function () {
var navTpl = document.getElemntById('nav-tpl').innerHTML;
// do what you want.
})()
</script>

Answer 5

用js模版引擎试试

Answer 6

涉及到字符串拼接你可以考虑coffee-script，即使有动态数据也不怕，更去处引号和加号的烦恼

Answer 7

你可以看下我以前写过关于html复用的文章。利用一些模板引擎来做一些重复的事情。最后用自动化输出静态文件（有这个需求的话）。

转送门：HTML 代码复用实践

Answer 8

你如果单纯是为了展示上好看一些，可以拆分成一个数组，最后join起来。例如：

['<ul>', '<li>', ...].join('');

Answer 9

没有动态内容没必要 JS 生成吧，静态用 jade，动态语言的模板引擎那就太多了。
虽然现在 JS 越来越强大，但是就我个人观点来说，HTML、CSS、JS 各司其职才是最佳实践，非动态内容，直接 HTML 里面写死或者用后端语言提供的模板引擎不就好了。

Answer 10

没有动态数据怎么不直接写在html中呢，干嘛还要js生成？