如何從JavaScript動態創建文本框

Question

我正在嘗試在<div id="screens"> </div>內創建文本框。 我有一個下拉菜單，可以選擇要創建的文本框數量。

我在這里編寫的JavaScript代碼無法正常工作：

碼：

function create(param) {
    document.getElementById("screens").innerHTML="";          
    for(var i = 0; i < param; i++) {
        alert(i);
        document.write('<input type="text" name="Fname">');
    }
}

這是通過清除當前頁面的所有內容來添加文本框，但是我希望將文本框添加到<div id="screen"> </div> 。 我怎樣才能做到這一點？

Answer 1

嘗試這樣的事情：

function create(param) {
    var s= "";
    for(var i = 0; i < param; i++) {
        s+= '<input type="text" name="Fname">'; //Create one textbox as HTML
    }
    document.getElementById("screens").innerHTML=s;
}

Answer 2

由於您已經在問題中標記了jQuery，因此我假設您使用的是jQuery。

function create(param) {
    'use strict';

    var i;

    $("#screens").empty();

    for(i = 0; i < param; i += 1) {
        $('#screens').append('<input type="text" name="Fname">');
    }
}

的jsfiddle

一個純JavaScript實現如下所示：

function create(param) {
    'use strict';

    var i, target = document.getElementById('screens');
    target.innerHTML = '';

    for(i = 0; i < param; i += 1) {
        target.innerHTML += '<input type="text" name="Fname">';
    }
}

的jsfiddle

Answer 3

function create(param) {
    var screens = document.getElementById('screens'),
        innerHTML = '',
        i;

    for (i = 0; i < param; i += 1) {
        alert(i);
        innerHTML += '<input type="text" name="Fname">';
    }

    screens.innerHTML = innerHTML;
}

Answer 4

function create(param) {
    var target = document.getElementById('screens'),
        oFrag=document.createDocumentFragment();

    target.innerHTML = '';

    for (var i = 0; i < param; i++) {
        var iptNode = document.createElement("input");
        iptNode.setAttribute("type", "text");
        iptNode.setAttribute("name", "Fname");
        oFrag.appendChild(iptNode);
    }

    target.appendChild(oFrag);
}

Answer 5

<script>
var newInput4=document.createElement("input");
newInput4.className="form-control ";
newInput4.name="totalunit"+instance;
newInput4.placeholder="Unit";   
newInput4.type="text";
</script>