JS写在HTML中是JS的代码不是太多，单独一个JS文件反而影响了页面的加载速度。因此html5很多人把页面结构写在js中是提高页面的加载速度。
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准。
大段的 HTML 嵌入到 JS 里结果就是悲剧。不能代码高亮不能自动缩进，太难维护了。我的经验是，直接把 HTML 单独写到一个浏览器能访问到的文件里，比如 template/foo.html。然后 JS 里发一个同步 XHR 请求去读这个文件，例如：
var html = Template.load('/template/foo.html')
var target = document.getElementById('xxx')
target.innerHTML = html
Template 是一个工具类，负责发送同步 XHR 请求并返回结果。
这样在开发的时候，模板文件和 JS 代码分离，非常好维护。
当然这样做的话，上线的时候总发 XHR 请求也不是办法。所以在打包 JS 之前，我一般会通过脚本把所有的 Template.load('.*') 提取出来，替换成对应 HTML 的内容。这样在开发时非常方便，上线时也没有性能问题。
比如上面的代码被打包工具跑一下就变成了：
var html = "<ol>\n<li class=\"xxx\">...</li>\n</ol>"// 引号里是 /template/foo.html 对引号、换行做了转义之后的内容，由工具自动生成
var target = document.getElementById('xxx')
target.innerHTML = html
在JS中插入短的HTML代码，可以通过先使用一个函数来包着，你要添加的HTMl代码，然后在使用innerHTML这个函数提取就行，在你的HTMl中添加一个事件就行，然后调用这个函数就行了，具体的我提供例子给你看下：<html>
<head>
<script>
function
insert(){
var
insertText
=
"<table><tr><td>any
thing</td></tr></table>"
document.getElementById("insert").innerHTML(insertText)
}
</script>
</head>
<body>
<button
onclick="insert()">Insert</button>
<div
id="insert"></div>
</body>
</html>
