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

JavaScript029

如何优雅的用js动态添加html代码,第1张

一、使用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) // 如果有脚本,则执行脚本

})

以上,请采纳,请给分。