注意,当执行kid1.replaceChild(repKid,kid1.firstChild);的时候,table2的子节点已经被转移到table1了,table2已经没有子节点,不能再调用table2的子节点。看看代码的注释,试着运行一下,应该就知道文档是怎么改变的了。
D、往文档添加新内容
在学会遍历、搜索、修改文档之后,我们现在试着网文档添加新的内容。其实没有什么新意,只是利用我们上述提到的Node的属性和方法而已,还是操作<table>标记的内容。有新意的是,我们要实现一个留言簿。是的,留言簿,你可以往里面留言,只是不能刷新噢。
例子6 – sample5_1.htm:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title><script language="javascript">function insertStr() {var f = document.form1;var value = f.str.value;if(value!="") {// 从最终的TextNode节点开始,慢慢形成<tbody>结构var text = document.createTextNode(value); //新建一个TextNode节点var td = document.createElement("td"); //新建一个td类型的Element节点var tr = document.createElement("tr"); //新建一个tr类型的Element节点var tbody = document.createElement("tbody"); //新建一个tbody类型的Element节点td.appendChild(text); //将节点text加入td中tr.appendChild(td); //将节点td加入tr中tbody.appendChild(tr); //将节点tr加入tbody中var parNode = document.getElementById("table1"); //定位到table上parNode.insertBefore(tbody,parNode.firstChild); //将节点tbody插入到节点顶部//parNode.appendChild(tbody); //将节点tbody加入节点尾部}}</script></head><body><form name="form1" method="post" action=""> <input name="str" type="text" id="str" value=""> <input name="insert" type="button" id="insert" value="留言" onClick="insertStr()"></form><table width="400" border="1" cellspacing="0" cellpadding="0" id="table1"><tbody> <tr> <td height="25">网友留言列表:</td> </tr></tbody></table></body></html>
我们之前说过,<table>的子节点是<tbody>,<tbody>的子节点才是<tr>,<tr>是<td>的父节点,最后<td>内部的TextNode节点。所以,往<table>增加单元