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>的值，例如键入其中，设置属性不会再更改值，但设置值属性仍会更改它。同样，这是因为属性与属性不同。

Answer 2

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

Answer 3

我想你错过了;在“文本”之后。

使用纯Javascript创建输入字段

3 个答案: