使用纯 Javascript 创建输入字段答案

【问题标题】：Create an input field using pure Javascript使用纯 Javascript 创建输入字段
【发布时间】：2013-06-18 12:34:34
【问题描述】：

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

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

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

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

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

<input type="text">

我错过了什么？

【问题讨论】：

你能把你用来将元素插入 DOM 的代码也放进去吗？
怎么了，页面或提交时没有显示值？

标签： javascript html createelement

【解决方案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 不会再改变 value，但设置 value 属性仍然会改变它。同样，这是因为 attribute 与 property 不同。

【讨论】：

注意：要设置或修改当前值，应尽可能使用属性。例如，使用elt.value = val 而不是elt.setAttribute('value', val)，因为浏览器和环境之间的不一致，最明显的是XUL 和IE（IE 使用class 而不是className）。如果您想了解/了解更多信息，请进行一些搜索。 +1。 OPs 代码应该可以正常工作：jsfiddle

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

分号不是必需的...但首选