web-dev-qa-db-ja.com

純粋なJavascriptを使用して入力フィールドを作成する

私はJSでのみそのような要素を作成しようとしています：

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

そうするために、私はこのコードを試しました：

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

しかし、Chrome Dev Toolsで実行すると、この要素のみが作成されます。

<input type="text">

何が欠けていますか？

javascripthtmlcreateelement
8
Enrique Moreno OB

HTMLElement isnのpropertyの設定attributeを同じものに設定するのとまったく同じではありません。

あなたはおそらく使用したかった 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>によって表示されるvalueはdefaultのままですが、 属性。

さらに、ユーザーが<input>のvalueを変更した場合、入力し、属性を設定しても、値は変更されません、ただしvalueプロパティを設定しても変更されます。繰り返しますが、これは属性がプロパティと異なるためです。

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

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

1
Cyrille Armanger