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

我错过了什么？

- Enrique Moreno OB

---

你能把你用来将元素插入DOM的代码也放进去吗？ - David Barker

有什么问题吗？值没有显示在页面上还是提交时出现了问题？ - Bergi

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 属性仍将更改它。这是因为一个 属性 不同于一个 属性。

- Paul S.

---

请注意：如果可能的话，请使用属性设置或修改当前值，例如使用elt.value = val而不是elt.setAttribute('value', val)，因为在各种浏览器和环境中存在不一致性，尤其是XUL和IE（IE使用class而非className）。 如果您想了解更多信息，请进行一些搜索。 +1。然而，OP的代码应该可以正常工作：[jsfiddle]（http://jsfiddle.net/Xotic750/cD8zZ/） - Xotic750

Answer 2

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

- karthi

Answer 3

我认为你在 "text" 后面漏掉了分号。

- Cyrille Armanger

---

分号不是必须的，但更受推荐。 - claustrofob