javascript - 使用纯 Javascript 创建输入字段

Question

我试图只用 JS 创建这样的元素：

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

为此，我尝试了以下代码：

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

但是当我在 Chrome 开发工具中运行它时，它只会创建这个元素：

<input type="text">

我错过了什么？

Answer 1

设置HTMLElement的属性与将其属性设置为同一事物并不完全相同。

您很可能想使用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，只是没有设置为属性。

进一步注意，如果用户更改了 的值，<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

我认为您缺少 ; 在“文本”之后。