当前位置:Gxlcms > JavaScript > 基于JavaScript创建动态Dom_javascript技巧

基于JavaScript创建动态Dom_javascript技巧

时间:2021-07-01 10:21:17 帮助过:3人阅读

动态脚本

我们在页面中使用

从上图的结果中可以看到,上面代码在元素中生成了一个

需要注意的是,在执行最后一行代码把

上面的代码会在元素中插入一段JavaScript代码:

执行上面的代码后会弹出提示框,显示“hello world!”文本。

在Firefox、Safari、Chrome和Opera浏览器中,上面操作的DOM代码是可以正常执行的。但是在旧版本的IE浏览器中,这些代码会发生错误。旧版本的IE浏览器将

像上面这样修改代码之后,在IE、Firefox、Safari3.0、Chrome和Opera浏览器中都可以运行。Safari3.0之前的浏览器虽然不能正确的执行text属性,但是可以使用文本节点来指定代码。所以如果需要支持旧版本的浏览器,可以像下面这样书写代码:

上面的代码首先尝试标准的DOM文本节点方法,因为除了旧版本的IE浏览器之外,其它浏览器都支持这种方式。如果这行代码抛出异常,那么说明是旧版本的IE浏览器,那就必须使用text属性。

我们可以将动态添加脚本的代码封装到一个函数中,通过不同的参数来动态加载不同的脚本。

要调用这个函数,可以像下面的样子:

这种方式加载的代码会在全局作用域中执行,而且当脚本执行后立刻可用。实际上,这样执行代码与在全局作用域中把相同的字符串传递给eval()函数是一样的。

动态样式

通常可以将CSS样式包含到HTML页面中的元素有两个:一个是元素,用于包含来自外部的文件;另一个是

以上的代码可以在Firefox、Safari、Chrome和Opera浏览器中正常运行,在旧版本的IE浏览器中会报错。旧版本的IE浏览器会将