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として設定されていません。

さらに、ユーザーがtype などの の値を変更した場合、属性を設定しても値は変更されませんが、 valueプロパティを設定すると値が変更されることに注意してください。繰り返しますが、これは属性がプロパティと異なるためです。<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

私はあなたが欠けていると思います; 「テキスト」の後に。