如何从javascript动态创建文本框

我试图在<div id="screens"> </div>内部创建文本框。我有一个下拉菜单，我选择要创建的文本框的数量。如何从javascript动态创建文本框

我在这里写的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>。我怎样才能做到这一点？

来源

2013-08-20 Mithun Ds

请阅读有关一些文档['document.write（）的']（https://developer.mozilla.org/en-US/docs/Web/API/document.write）。您已在代码中使用['innerHTML']（https://developer.mozilla.org/en-US/docs/Web/API/element.innerHTML），为什么不重用它？ – Teemu

尝试是这样的：

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; 
}

来源

2013-08-20 04:39:59

由于您在问题中标记了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

来源

2013-08-20 04:37:28

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; 
}

来源

2013-08-20 04:45:09 federicot

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); 
}

来源

2013-08-20 04:56:01 artwl

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

来源

2015-07-02 10:41:28

如何从javascript动态创建文本框

回答

相关问题