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

一、使用javascript 模板引擎

用javascript预编译模版，就是动态修改模板文件使之成为一个可用的静态HTML文件。 我平时会使用artTemplate，性能很好而且易上手。

编写模板

使用一个type="text/html"的script标签存放模板：

<script id="test" type="text/html">

<h1>{{title}}</h1>

<ul>

{{each list as value i}}

<li>索引 {{i + 1}} ：{{value}}</li>

{{/each}}

</ul>

</script>

渲染模板

var data = {

title: '标签',

list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']

}

var html = template('test', data)

document.getElementById('content').innerHTML = html

二、使用CoffeeScript

CoffeeScript支持类似于Python的跨行字符串，这样很轻易的就能保持HTML结构的可读性，而不需要使用“+”或者采用拼数组的形式。

str="""

<div class="dialog">

<div class="title">

<img src="close.gif" alt="关闭" />关闭

</div>

<div class="content">

<img src="delete.jpg" alt="" />

</div>

<div class="bottom">

<input id="Button2" type="button" value="确定" class="btn"/>

<input id="Button3" type="button" value="取消" class="btn"/>

</div>

</div>

"""

你描述的比较乱，不过我大概能理解你的意思。

因为没有具体的代码，所以也只能说说思路。

按我的理解，重新描述你现在的问题是：

通过模板渲染，或者 ajax 异步载入的 html 内容，会通过 innerHTML 或者一定的 DOM *** 作，插入到文档中。你希望在这段文档碎片插入后，执行一些脚本。但是遇到的问题是：插入的脚本无法执行。

那么我的建议的解决方法有以下几种：

1、第一种方法，通过设置定时检查，来判断内容是否完成载入。

在 {{data.content}} 中放一个 “标识”。例如：

<!-- 你正常的 content 内容 -->

<p>。。。。。</p>

<!-- 特殊的标识 -->

<span id="a_special_id"></span>

然后在整个页面的脚本中，加一个定时检查器 (下面代码放在整个页面的 head 里)：

var flag = false // 一个状态标记，记录需要进行的脚本是否执行过

// 用来检查的函数

function check(){

    // 如果脚本已执行过，则退出，避免重复执行。

    if (flag) return

    

    // 尝试获取 {{data.content}} 中的 “标识”

    var obj = document.getElementById('a_special_id') 

    

    // 如果获取成功，说明代码已经完成载入

    if (obj) {

        // 这里放上你想要进行的 *** 作，例如你问题中的：

        jQuery(document).ready(function() {

            jQuery('.media-frame-content').css("height",winheight)

        })

    

        // 设置状态标记，避免脚本重复执行

        flag = true

    } else {

        // 如果代码没有完成载入

        // 设置定时器，过一段时间再次检查

        setTimeout(check, 100)

    }

}

// 开始检查

check()

2、 第二种方法，是针对为什么插入的脚本不能执行来解决的。

一般来说，通过 innerHTML 或者 DOM 方法插入的 script 脚本都不能正常执行。

那么应该在你的模板解析函数中，进行一定的判断处理。

例如 ajax 获得服务器返回的数据后，检查有无 script 块，如果有，则提取其内容，并通过 eval 来执行。

示例代码：

// 伪代码，假设下面是一个通过 ajax 获取 get.php 页面得到返回数据的模式

$.ajax('get.php', function(data){

    var reg = /<script>([\s\S]+)<\/script>/i // 正则

    var sc

    if (reg.test(data)) {

        sc = data.match(reg)[1] // 提取脚本

        data = data.replace(reg, '') // 移除脚本

    }

    container.innerHTML = data // 将 html 内容输出到当前页面

    if (sc) eval(sc) // 如果有脚本，则执行脚本

})

以上，请采纳，请给分。

1. 【调试服务器】首先如果你是一个准备做WEB开发实践的，不管前端、后台，首先需要了解一两种服务器apache，tomcat，nginx啥的，至少能够配置一个基本的本地服务和修改索引路径，前端页面使用http/https协议访问，而不是本地文件协议（file协议下很多jsAPI都是受限的）。

2. 【调试自动更新】服务器搭建好了，那么现在开始调试网页，然后你修改一点代码，去浏览器里面F5刷新页面看看效果，再修改一点代码，再去浏览器里面F5刷新页面看看效果...如此循环往复， maybe让工具帮助你检测本地文件修改然后实时刷新网页更靠谱。

3. 【换种方式写代码】然后就是写代码了，less/sass是不错的css组织工具，ES6也能让你的javascript代码显得更严谨和逻辑清晰，要是能够在访问页面的时候实时获取css/babel(es6编译器)编译结果神马的应该显得很cool。

4. 【模块化】当然在完成逻辑相对复杂的交互功能时候，可能需要你组织非常复杂的代码功能，这个时候了解一下模块化的开发思想显得很有必要require.js事实上更早，也更广泛一点，sea.js在国内也不错。

5. 【模板引擎】然后就是对于js生成HTML(或者其他什么的)的一种包装方式, 即：js模板引擎(handlebars,jade)， 你可以尝试在开发时候使用这样的模板工具生成自己想要的HTML文档什么的，也是一种不错的体验，这个就像你用less写css代码一样，或者说用php，jsp这样的服务端语言工具生成实时HTML页面。

6. 【代理调试】有的时候你开发的东西并不只是前端代码，牵扯到跟服务端应用之间的数据交互，难免需要使用ajax，ajax这货基于安全考虑是不允许跨域的，因此可能需要通过代理的方式实现数据调试这样的工具也有不少，nginx服务器是其中的佼佼者。

7. 【资源合并优化】OK， 如果到完成开发阶段，你需要提交自己开发的代码到线上服务器了，在提交之前，你需要考虑将开发的资源进行最优化(合并，压缩神马的)， js方面有uglify，css有cssmin神马的，图片压缩还可能根据不同的类型进行不同程度和配置的压缩，这些事情交给别个工具处理显得很有必要，要是能够一键处理那简直了， 百度的fis，业内最流行的grunt.js、gulp.js神马的，事实上它们在配置化编译LESS/Coffee这类工作在自己的流程中也很在行。

8. 【Combo】使用异步模块化开发带来的弊端就是对于大量零碎依赖文件需要分别开辟多个http链接去获取，这可不是一个好现象，要知道单个浏览器单域名并发获取资源的数量是很有限的， 因此例如KISSY就支持了简单配置一个combo参数来组织一个获取nginx的 http-concat格式资源的路径，当然这样的动态合并模式也适用于普通的资源请求合并。

9.【资源缓存和更新】 CDN 能够确保你已经发布到服务器上的资源以最快的响应时间到达浏览器，但是带来的问题是，你的代码更新，CDN则傻乎乎的不理你，除非你在使用的地方告诉它需要更新了( 时间戳、MD5文件名啥的 )。

事实上，我觉着凡是重复进行的工作总有可以程序和代码可以替你完成的部分，前端开发中这种事情尤其多，工具啥样的自己去定义才最合适自己，而nodejs的出现使得前端自己可以方便的开发这类东西（上面的less、coffee、uglify、gruntjs、fis、gulp这些个单词可以说：都依赖nodejs）。

---