javascript - 如何从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>