一、向表追加行
在以往使用Ajax的經曆中，你很可能會使用JavaScript向現有的表中追加行，或者從頭建立包含表行的新表。document.createElement和document.appendChiid方法可以使這很容易做到,只需使用document.createElement建立表儲存格,再使用document.app-endChild方法將這些表儲存格增加到表行。接下來的編輯步驟是使用document.append-
Child將表行增加到表中。
在Firefox、Safari和Opera等當前瀏覽器中,這樣做是可以的。不過,如果使用的是lE，表行則不會在表中出現。更糟糕的是，IE甚至不拋出任何錯誤，或對錶行確實已經追加到表中卻不會顯示出來的問題提供任何線索。
在這種情況下，解決方案很簡單。IE允許將tr元素增加到tbody元素，而不是直接增加到table元素。例如，如果定義一個空表如下：
<table id="myTable">
<tbody id="myTableBody"></tbody>
</table>
向這個表中增加行的正確做法是把行增加到表體，而不是增加到表，如下所示：
var cell=document.createElement("td").appendChild(document.createTextNode("foo"));
vat row=document.createElement("tr").appendChild(cell);
document.getElementByld("myTableBody").appendChiid(row);
辛運的是，這種方法在所有當前瀏覽器上都能用，也包括IE。如果你養成習慣，總是使用表中的表體，就不用擔心這個問題了。
二 通過javascript設定元素的樣式
利用Ajax技術，開發人員建立的Web應用可以與伺服器無縫地通訊，而無需完全頁面重新整理。但對於A1ax請求，是不會出現這種頁面閃爍的，所以使用者可能不知道頁面上有些資料已經更新。你可能想修改某些元素的樣式，指示頁面上一些資料已經改變。例如，如果股票的價格已經通過Ajax請求得到了無縫更新，可以加亮顯示這支股票的名字。
可以通過JavaScript使用元素的setAttribute方法設定元素的樣式。例如，要把span元素中的文本修改為採用紅色粗體顯示．可以使用setAttribute療法如下：
var spanElement = document.getElementById("mySpan");
spanElement.setAttribute("style", "font-weight:bold; color:red;");
除了IE、這種方法在當前其他瀏覽器上都是行得通的。對於IE，解決方案是使用元素style對象的cssText屬性來設定所需的樣式．儘管這個屬性不是標準的，但得到了廣泛支援，如下所示：
var spanElement = document.getElementById("mySpan");
spanElement.style.cssText = "font-weight:bold; color:red;";
這種方法在IE和大多數其他瀏覽器上部能很好地工作，只有Opera除外。為了讓代碼在所有當前瀏覽器上都可移植，可以同時使用這兩種方法，也就是既使用setAttribute方法，也使用元素style對象的cssText屬性，如下所示：
var spanElement = document.getElementById("mySpan");
spanElement.setAttribute("style", "font-weight:bold; color:red;");
spanElement.style.cssText = "font-weight:bold; color:red;";
這樣一來，在當前所有瀏覽器上都能正常地設定元素的樣式了。
三、設定元素的class屬性
讀過前一節後，瞭解到可以通過JavaScript來設定元素的內聯樣式，你可能想當然地認為，簡單地設定無素的class屬件應該是最容易的了。遺憾的是，並不如此。與設定元素內聯樣式類似，通過JavaScript動態地設定元素的class屬性時也存在一些特異性。
你可能已經猜到了，IE是當前瀏覽器中的一個異類，不過解決方案倒也相當簡單。使用Firefox和Safari之類的瀏覽器時，可以使用元素的setAttribute方法來設定冗素的class屬性，如下所示：
var element = document.getElementById("myElement");
element.setAttribute("class", "styleC1ass");
奇怪的是，如果使用setAttribute方法，並指定屬性名稱為class，IE並不會設定元素的class屬性。相反，只使用setAttribute方法時IE會自己識別className屬性。對於這種情況，完備的解決方案是：使用元素的setAttribute方法時，將class和className都用作屬性名稱，如下所不：
var element = document.getElementById("myElement");
element.setAttribute("class", "styleC1ass");
element.setAttribute("className", "styleC1ass");
當前大多數瀏覽器都會使用class屬性名稱而忽略className，IE則正好相反。
四、建立輸入元素
輸入元素為使用者提供了與頁面互動的手段。HTML本身有一組有限的輸入元素，包括單行文字框、多行文字框、選擇框、按鈕、複選框和單選鈕。你可能想使用JavaScfipt動態地刨建這樣一些輸入元素作為Ajax實現的一部分。
單行文字框、按鈕、複選框和單選鈕都可以建立為輸入元素，只是type屬性的值有所不同。選擇框和文本區有自己特有的標記。通過JavaScript動態地建立輸入元素很簡單(但單選鈕除外，這在“刨建單選鈕”一節再做解釋)，只要遵循一些簡單的規則就行。使用document.createElement方法可以很容易地建立選擇框和文本區，只需向document.cr
eateElement傳遞元素的標記名，如select或textarea。
單行文字框、按鈕、複選框和單選鈕稍難一些，因為它們都有同樣的元素名input，只是type屬性的值不同。所以，要建立這些元素，不僅需要使用document.createElement方法，後面還要調用元素的setAttribute方法來設定type屬性的值。這並不難，但確實要多加一行代碼．
考慮在哪裡把新建立的輸入元素增加到其父元素中，必須注意document.createElement和setAttribute語句的順序。在某些瀏覽器中，只有刨建了元素，而且正確地設定了type屬性時，於會把新建立的元素增加到其父元素中。例如，以下程式碼片段存某些瀏覽器中可能有奇怪的行為：
document.getElementById("formElement").appendChild(button);
button.setAttribute("type", "button");
為了避免奇怪的行為，要確保刨建輸入元素後設定其所有屬性，特別是type屬性，然後再把它增加到父元素中，如下：
var button = document.createElement("input"):
button.setAttribute("type", "button");
document.getElementById("formElement").appendChild(button);
遵循這個簡單的規則，有助於消除以後可能出現的一些難於診斷的問題。
五 向輸入元素增加事情處理常式
向輸入元素增加事件處理常式應該與使用setAttribute方法並指定事件處理常式的名字和所需函數處理常式的名字一樣容易，對嗎?錯。設定元素的事件處理常式的標準做法是使用元素的setAttribute方法，它以事件名作為屬性名稱，並把函數處理常式作為屬性值．如下所示：
var formElement = document,getElementById("formElement");
formElement.setAttribute("onclick", "doFoo();");
除了IE上面的代碼在所有當前瀏覽器中都能工作。如果在IE中使用JavaScfipt設定元素的事件處理常式，必須對元素使用點記法來引用所需的事件處理常式，非把它賦為匿名函數，這個匿名函數需要調用所需的事什處理常式，如下所示：
var formElement = document,getElementById("formElement");
formElement.onclick = function() { doFoo(); };
注意，是如何通過點記法從formElement引用onclick事件處理常式。onclick事什處理常式賦為一個匿名函數，這個匿名函數只是調用了所需的事件處理常式．在這個例子中事件處理常式就是doFoo。
幸運的是，這種技術得到了IE和所有其他當前瀏覽器的支援．所以完全可以通過JavaScfipt動態地設定表單元素的事件處理常式。
六、建立選項按鈕
最好的總是留在最後。通過JavaScript動態地建立單選鈕是很費勁的，因為IE中建立單選鈕的方法與其他瀏覽器所用的方法大相徑庭。
除了IE，當前所有其他瀏覽器都允許使用以下方法建立單選鈕(這些方法應該能想得到)：
var radioButton = document.createElement("input");
radioButton.setAttribute("type", "radlo");
radioButton.setAttribute("name", "radioButton");
radioButton.setAttribute("value", "checked");
這樣就能在除IE以外的所有當前瀏覽器中建立單選選鈕，而且能正常工作。在lE中，單選鈕確實會顯示出來．但是無法將其選中，因為點擊單選鈕行不按我們預想得那樣使之選中。在IE中，建立單選鈕的方法與其他瀏覽器所用的方法完全不同，而且根本不相容。對於前面建立的單選鈕，在IE中可以如下建立：
var radioButton = decument.createElement("<input type='radio'
name='radioButton' value='checked'>");
好在，IE中確實可以通過JavaScript動態地建立單選鈕，只不過難些，而且與其他瀏覽器不相容。
如何克服這個限制呢?答案很簡單，這就是需要某種瀏覽器嗅探(browser-sniffing)機制，使得在建立單選鈕時指令碼就能知道該使用哪個方法。幸運的是，你不用檢查大量不同的瀏覽器。假設只使用現代瀏覽器，指令碼只需要在IE和其他瀏覽器間進行區分就行了。
IE能識別出名為uniqueID的document對象的專用屬性，名為uniqueID。IE也是惟一能識別這個屬性的瀏覽器，所以uniqueID很適合用來確定指令碼是不是在IE中運行。
使用docurnent.uniqueID屬性來確定指令碼在哪個瀏覽器中運行時，可以結合IE特定的辦法和標準相容的方法，這就會得到以下代碼：
if(document.uniqueID) {
//Internet Explorer
var radioButton = decument.createElement("<input type='radio'
name='radioButton' value='checked'>");
}
else {
//Standards Compliant
var radioButton = document.createElement("input");
radioButton.setAttribute("type", "radlo");
radioButton.setAttribute("name", "radioButton");
radioButton.setAttribute("value", "checked");
}
