AJAX開發簡略續一(4)
來源：互聯網
上載者：User
例子5 -- sample4_3.htm：正如我們在Node節點介紹部分所指出的那樣，appendChild()、replaceChild()、removeChild()、insertBefore()方法會立即改變文檔的結構。下面的例子包含兩個表格，我們試著把表格二的內容替換表格一的內容。<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>無標題文檔</title><script language="javascript">function replaceContent() { var table1 = document.getElementsByTagName("table")[0]; var table2 = document.getElementsByTagName("table")[1]; var kid1 = table1.firstChild.firstChild.firstChild; //定位到<td>節點 var kid2 = table2.firstChild.firstChild.firstChild; //定位到<td>節點 var repKid = kid2.firstChild; //定位到表格二<td>內含的TextNode節點 try { //用表格二的儲存格內容替換表格一的儲存格內容，表格二變成沒有儲存格內容 kid1.replaceChild(repKid,kid1.firstChild); //下面注釋如果開放，將出現object error，因為表格二已經被改變 //kid2.replaceChild(kid1.firstChild,kid2.firstChild); }catch(e){ alert(e); }}</script></head><body><table width="200" border="1" cellspacing="0" cellpadding="0"><tbody> <tr> <td>表格一</td> </tr></tbody></table><br><table width="200" border="1" cellspacing="0" cellpadding="0"><tbody> <tr> <td>表格二</td> </tr></tbody></table><br><input type="button" name="replaceNode" value="替換" onClick="replaceContent()"></body></html> 注意，當執行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>增加儲存格行要逐級形成，就像往樹裡面添加一個枝椏一樣，要有葉子有徑。看看，這個留言簿是不是很簡單啊。這個例子同時也示範了往<table>表格標記裡面增加內容的另一種方法。
