Tạo một lĩnh vực đầu vào sử dụng tinh khiết Javascript

Question

Im cố gắng để tạo ra yếu tố như vậy chỉ với JS:

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

Để làm như vậy, tôi đã cố gắng mã này:

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

Nhưng khi tôi chạy nó trong Chrome Công cụ tìm kiếm, công cụ này chỉ tạo phần tử này:

<input type="text"> 

Tôi đang thiếu gì?

Answer 1

Thiết lập một tài sản của một HTMLElement không phải là chính xác giống như thiết lập nó thuộc tính để điều tương tự.

Bạn rất có thể muốn sử dụng element.setAttribute

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

Bây giờ bạn có thể thấy

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

Trong ví dụ của bạn, giá trị hiển thị bởi <input> vẫn sẽ default, nó chỉ isn' t được đặt làm thuộc tính .

Lưu ý thêm rằng nếu người dùng thay đổi giá trị của <input>, ví dụ: các loại vào đó, đặt thuộc tính sẽ không thay đổi giá trị nữa, nhưng đặt thuộc tính giá trị sẽ vẫn thay đổi. Một lần nữa, điều này là do thuộc tính khác với thuộc tính .

Answer 2

Tôi nghĩ bạn đang thiếu; sau "văn bản".

Answer 3

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