大笨鳥的私房菜

有時為了動態網頁的需要，我們會動態插入一個(或多個)文字欄位元件到 Form Tag 中，如下：
// 取得 form 元件
var form = document.getElementById("form1");
// 建立 文字欄位元件
var text = document.createElement("input");
text.type = "text";
text.name = "hello";
form.appendChild(text);

一般而言，這樣的寫法是可正確執行的，但是如果你的 form tag 被包在 table tag 裏 (如下所示)，則會發生出乎意料的事。

<table width="100%">
    <form id="form1" name="form1">
        <tr>
            <td id="testTd">
            </td>
        </tr>
    </form>
</table>


當我們執行上述的 Javascript 語法時，我們會發現在畫面上竟然看不到新加入的文字欄位，但是在 submit 之後，這個新加入的文字欄位卻確實有被送出，此為第一種情況。

接下來第二種情況是我們稍微修改一下上面的 Javascript 語法，改將文字欄位加到 td 之內，如下所示：

// 取得 td 元件
var td = document.getElementById("testTd");
// 建立 文字欄位元件
var text = document.createElement("input");
text.type = "text";
text.name = "hello";
td.appendChild(text);

理論上來說，這個新加入的文字欄位雖然位於 td 之內，但由於 td 是被包在 form 裏，所以這個文字欄位應該也是隸屬於 form 才對，至少如下的 html 寫法是正確無誤的。

<table width="100%">
    <form id="form1" name="form1">
        <tr>
            <td id="testTd">
                <input type="text" name="text_2">
            </td>
        </tr>
    </form>
</table>


但是實際的結果確是畫面上可以看得到新產生出來的文字欄位，但在 submit 之後該文字欄位卻沒有送出去。

第一種情況的原因是 form tag 位於 table tag 的不可視範圍內 (亦即不在 td tag 內)，因此加入的文字欄位雖然確實隸屬於 form tag，但是並無法在畫面上看見。

第二種情況的原因則是新加入的文字欄位是隸屬於 table 的 DOM tree，而不是 form 的 DOM tree，所以雖然畫面上看得到該文字欄位，但由於該文字欄位並不在 form 的 DOM tree 之內，也因此在 submit 時並不會將該文字欄位送出。

會發生這樣的問題，主要是一般人會以為使用 Javascript 插入元件和直接在 html 頁面上加入 tag的行為模式是一樣的，殊不知 Javascript 操作的是一個看不見的 DOM tree，其行為未必會直接在頁面上插入 tag 一樣，只要一不小心就會將元件插入非預期的 DOM tree 中，到時候要抓問題就會非常難，因此要小心謹慎才是。

最後，要改正以上的問題其實很簡單，只要將 form tag 置於 table tag 之外，或是置於 td tag 之內即可解決。