DOM树添加script脚本和style样式

[b]添加javascript脚本:[/b]
如果要添加以下脚本到DOM文档页面中:

<script type="text/javascript">
function sayHi(){
alert("hi");
}
</script>

运用DOM节点操作的知识,我们可能会这样写:

var script = document.createElement('script');
script.type = 'text/javascript';
script.appendChild(document.createTextNode('function sayHi(){alert("hi");}'));
document.body.appendChild(script);


上述代码在除IE外的浏览器都可以正确运行,但是,对于IE来讲,script元素是比较特别的,因此不允许访问它的子节点。
修改后的代码如下:

var script = document.createElement('script');
script.type = 'text/javascript';
var code = 'function sayHi(){alert("hi");}';
try{
script.appendChild(document.createTextNode(code));
}catch(ex){
script.text = code;//this works in all browers.
}
document.body.appendChild(script);


[b]在文档添加css代码也有类似的情况:[/b]

<style type="text/css">
body {
background-color: red;
}
</style>


实现的代码应该如下:

var style = document.createElement('style');
style.type = 'text/css';
var cssText = "body{background-color:blue;}";
try{
style.appendChild(document.createTextNode(cssText));
} catch (ex){
style.styleSheet.cssText = cssText;//IE
}
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);



整理自<<Professional.JavaScript.for.Web.Developers.2nd.Edition>>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值