动态插入JavaScript
- 直接插入JavaScript代码
- 插入外部js文件
<!-- <script type="text/javascript" src="client.js"></script> -->
<script type="text/javascript">
var script = document.createElement('script');
script.type='text/javascript';
script.src='client.js';
document.body.appendChild(script);//将该语句插入body的最后一个子节点的位置上
封装成函数:
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
loadScript("client.js");
插入JavaScript代码
直接插入一段代码
<script type="text/javascript">
function sayHi(){
alert("hi");
}
</script>
分析:
节点:Script,Text类型节点
var script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(document.createTextNode("function sayHi(){alert('hi');}"));
document.body.appendChild(script);
封装成函数:
function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try {
//IE不支持这种搞法(但是这个简单)
script.appendChild(document.createTextNode(code));
} catch (ex){
script.text = code;//给IE开个小灶
}
document.body.appendChild(script);
}
下面是调用这个函数的示例:
loadScriptString("function sayHi(){alert('hi');}");
动态样式
所谓动态样式是指在文档加载完成后,动态的将css样式插入到文档中
外部样式link
内部样式style
动态引入外部样式:
<link rel="stylesheet" type="text/css" href="styles.css">
分析:
节点:link
属性:type href
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
注意: 必须将css样式加到head中是浏览器样式一致。
抽取成函数:
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);
}
调用 loadStyles() 函数的代码如下所示:
loadStyles("styles.css");
使用 style来引入样式
<style type="text/css">
body {
background-color: red;
}
</style>
分析:
节点:style,text
属性:type
var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color:red}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
抽取成函数:
function loadStyleString(css) {
var style = document.createElement("style");
style.type = "text/css";
try {
// 在IE中不允许访问style的子节点
style.appendChild(document.createTextNode(css));
} catch (ex) {
//为了兼容IE 使用styleSheet属性
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}
动态操作表格
静态表格:
<table border="1" width="100%">
<tbody>
<tr>
<td>Cell 1,1</td>
<td>Cell 2,1</td>
</tr>
<tr>
<td>Cell 1,2</td>
<td>Cell 2,2</td>
</tr>
</tbody>
</table>
可以使用添加节点的方法动态构建这个表格,但是未免麻烦;
JavaScript为为table元素添加的属性和方法如下方便操作:
caption :保存着对 caption 元素(如果有)的指针。
tBodies :是一个 tbody 元素的 HTMLCollection 。
tFoot :保存着对 tfoot 元素(如果有)的指针。
tHead :保存着对 thead元素(如果有)的指针。
rows :是一个表格中所有行的 HTMLCollection 。
createTHead() :创建 thead 元素,将其放到表格中,返回引用。
createTFoot() :创建 tfoot 元素,将其放到表格中,返回引用。
createCaption() :创建 caption 元素,将其放到表格中,返回引用。
deleteTHead() :删除 thead元素。
deleteTFoot() :删除 tfoot 元素。
deleteCaption() :删除 caption 元素。
deleteRow(pos) :删除指定位置的行。
insertRow(pos) :向 rows 集合中的指定位置插入一行。
为 tbody 元素添加的属性和方法如下。
rows :保存着 tbody 元素中行的 HTMLCollection 。
deleteRow(pos) :删除指定位置的行。
insertRow(pos) :向 rows 集合中的指定位置插入一行,返回对新插入行引用。
为 tr 元素添加的属性和方法如下。
cells :保存着 tr元素中单元格的 HTMLCollection 。
deleteCell(pos) :删除指定位置的单元格。
insertCell(pos) :向 cells 集合中的指定位置插入一个单元格,返回对新插入单元格的引用
案例:
关键节点:body,table,tbody
//创建 table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";
//创建 tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
// 创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
// 创建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
//将表格添加到文档主体中
document.body.appendChild(table);
通过循环实现:
var table = document.createElement('table');
table.border = 1;
table.width = "100%";
//创建 tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
for (var i = 0; i < 3; i++) {
tbody.insertRow(i);
for (var j = 0; j< 3; j++) {
tbody.rows[i].insertCell(j);
tbody.rows[i].cells[j].appendChild(document.createTextNode("Cell "+i+j));
};
}
//将表格添加到文档主体中
document.body.appendChild(table);