Utwórz pole tekstowe przy użyciu czystego JavaScript

Question

Im próbuje utworzyć taki element tylko z JS:

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

Aby to zrobić, próbowałem ten kod:

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

Ale kiedy go uruchomić w Chrome Dev Tools, tworzy tylko ten element:

<input type="text"> 

Czego mi brakuje?

Answer 1

Ustawianie własność o HTMLElement nie jest dokładnie taki sam, jak ustawienie to atrybut do tej samej rzeczy.

Najprawdopodobniej chciał użyć element.setAttribute

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

Teraz widać

new XMLSerializer().serializeToString(mi); 
// "<input type="text" value="default">" 

W przykładzie, wartośćwyświetlane przez <input> nadal będzie default, to po prostu nieprawdaż” t ustawiony jako atrybut.

Należy również zauważyć, że jeśli użytkownik zmieni wartość z <input>, np. typy do niego, ustawienie atrybut nie zmieni już wartości , ale ustawienie wartości wartość nadal będzie go zmieniać. Ponownie, dlatego, że atrybut jest inny niż właściwość .

Answer 2

Myślę, że brakuje wam; po "tekście".

Answer 3

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