1,动态脚本
创建动态脚本也有两种方式
插入外部文件
- 代码示例,也可以把这个脚本文件添加到head元素中
function loadScript(url){ var script = document.createElement("script"); script.type = "text.javascript"; script.src = url; document.body.appendChild(script); }
直接插入JavaScript代码
- 如要添加的HTML示例
<script type="text/javascript"> function sayHi(){ alert("hi"); } </script>
- 脚本代码如下
function loadScriptString(code){ var script = document.createElement("script"); script.type = "text/javascript"; try{ script.appendChild(document.createTextNode(code)); }catch(ex){ script.text = code; } document.body.appendChild(script); }
2,动态样式
- 介绍
- \<\link>元素用于包含来自外部的文件,\<\style>元素用于指定嵌入的样式。
使用\<\link>动态添加
- 要动态添加的元素如下:
<link rel="stylesheet" type="text/css" href="styles.css">
- 脚本代码如下
function loadStyles(url){ var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = url; var head = document.getElementsByTagName("head")[0]; head.appendChild(link); }
使用\<\style>
- 元素包含嵌入的CSS,如下
<style type="text/css"> body{ background-color:red; } </style>
- 脚本代码如下
function loadStyleString(css){ var style = document.createElement("style"); style.type = "text/css"; try{ style.appendChild(document.createTextNode(css)); } catch(ex){//兼容IE style.styleSheet.cssText = css; } var head = document.getElementsByTagName("head")[0]; head.appendChild(style); }
3,操作表格
- 为了方便构建表格,HTML DOM为table>、tbody、tr元素添加了一些属性和方法如下
- 为table元素添加的属性和方法如下
- 为tbody元素添加的属性和方法如下
- 为tr元素添加的属性和方法如下
- 为table元素添加的属性和方法如下