使用純Javascript創建輸入字段

Question

我試圖只用JS創建這樣的元素：

<input type="text" value="default">

為此，我嘗試了以下代碼：

var mi = document.createElement("input");
mi.type= "text"
mi.value = "default"

但是，當我在Chrome Dev Tools中運行它時，它只會創建以下元素：

<input type="text">

我想念什么？

Answer 1

設置的屬性 HTML元素是不完全一樣的，因為它的屬性設置為同樣的事情。

您最有可能想要使用element.setAttribute

var mi = document.createElement("input");
mi.setAttribute('type', 'text');
mi.setAttribute('value', 'default');

現在你可以看到

new XMLSerializer().serializeToString(mi);
// "<input type="text" value="default">"

在您的示例中， <input>顯示的值仍將是default ，只是未將其設置為attribute 。

還要注意，如果用戶更改了<input>的值 （例如鍵入），則設置屬性將不再更改該值 ，但設置value屬性仍將對其進行更改。 同樣，這是因為屬性不同於屬性 。

Answer 2

var i = document.createElement("input"); //input element, text
i.setAttribute('type',"text");
i.setAttribute('name',"username");
i.setAttribute('value',"default");

Answer 3

我想你錯過了; 在“文本”之后。