我的经验是，直接把 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 = "\n...\n"// 引号里是 /template/foo.html 对引号、换行做了转义之后的内容，由工具自动生成
var target = document.getElementById('xxx')
target.innerHTML = html
如您的网站是采用现成的建站系统或建站公司代开发的网站，代码添加后无法正常加载或采集数据，可能是程序代码对新版代码屏蔽部分语法所导致。若确实需要使用新版统计，可通过以下单独将代码放置在JS文件内引用解决该问题：
1、新建一个 .js 后缀的文件，文件内放入以下内容，并上传到您的网站空间或 CDN 中。
2、添加代码引用上述JS文件地址到网站头部<head>标签内。
<body><div id="div1" style="width:100px height:100px background:#ccc"></div>
</body>
<script>
var oDiv = document.getElementById('div1')
oDiv.style.position = 'fixed'
oDiv.style.top = '20px'
oDiv.style.left = '20px'
</script>
主要思想就是，在js中修改div的位置。所有的赋值，都可以计算后再传值，这样就不想CSS中只能写一个值了。
