在創建元素后將值添加到DOM元素

Question

我正在查看一些非常廣泛的代碼，用於從XML / XSL生成的網頁，然后讓Javascript動態生成布局。 我遇到麻煩的是，似乎IE（特定於第10版）顯示如果沒有值則元素為空文本節點，然后如果有值則顯示常規文本（無可編輯字段）。

這似乎改變了直接不可編輯文本的行為。

從我所看到的，第一步是讓Javascript通過DOM生成元素

input = document.createElement("input");

input.setAttribute("id", "blah");
input.setAttribute("type", "text");

然后它會將它附加到父級。 然后，似乎發生的是執行一個函數，該函數再次遍歷頁面並插入這些字段具有的任何值。

input.value = "Hello World";

Chrome和Firefox將正確顯示輸入字段並填充其字段，但IE10僅顯示該值，就好像它只是純文本一樣。

我從來沒有使用過這種網頁生成，並希望有人能夠幫我解決這個問題，所以我可以解決這個問題。 改變它的工作方式（當時）不是一個選項，所以我試圖糾正它，以便IE也很高興。

謝謝

Answer 1

這個特定的代碼序列適用於我嘗試過的所有瀏覽器（Chrome，IE，Firefox）：

var elem = document.createElement("input");
elem.type = "text";
elem.id = "test";
document.body.appendChild(elem);
elem.value = "This is some text";

如果您的確切代碼偏離此，那么您應該檢查差異或發布在IE中演示問題的確切代碼序列，以便我們更好地了解如何調試或建議。

你可以在任何想要在這里試用的瀏覽器中看到這個的工作演示： http ： //jsfiddle.net/jfriend00/z2FpP/

在您的代碼中需要注意的事項：

父母的任何代碼設置.innerHTML是否可以消除或重置子元素。
是input字段本身的任何代碼設置.innerHTML 。 不應該這樣做。 代碼應使用.value來設置input字段的文本。
代碼在IE中運行時是否有代碼錯誤？ 檢查錯誤控制台或調試控制台（在IE中按F12進入調試器，您可以在其中看到錯誤控制台）。
是否在input字段中設置了可能使其為只讀而不是可編輯的其他屬性？