javascript - 使用纯 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

设置一个属性 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> 的值 ，例如键入它，设置属性将不再更改值，但设置值属性仍会更改它。同样，这是因为 attribute 不同于 property。