Javascript？：如何動態地將文本輸入/表單字段添加到HTML表單？

Question

我正在構建一個Web表單，其中有一個輸入列表。 到現在為止還挺好。

但是，如何添加鏈接/按鈕以添加另外5個字段到列表中。 例如：

<input>
<input>
<input>
<input>

<a href="" onclick="">Add 10 more fields</a>

我在這個網站上查看了許多類似的q，但似乎沒有人描述如何添加多個字段。

謝謝你的幫助，

哈雷

編輯：謝謝大家的幫助，看起來像jquery追加是要走的路。 但是我很欣賞不使用jquery的替代方案。

Answer 1

  $("#anyDiv").html('<input id="id1"/>');

....

 $("#anyDiv").append('<input id="id2"/>');

Answer 2

這是一個js小提琴，展示了使用jQuery的append（）函數添加10個輸入的示例。 我建議每次點擊只做一次添加，就像在user1301840的例子中那樣。

HTML

<div id="inputList"></div>
<input type="button" value="Add 10 Inputs" id="addInputs" />​

使用Javascript

$('#addInputs').click(function() {
    for (i = 0; i < 10; i++) {
        $('#inputList').append('<input type="text" />');

    }
});​

Answer 3

雖然你已經有了答案，但我想我會嘗試提供一個非jQuery解決方案：

function addInput(insertAt, formEl, num, inputType, defaultVal) {
    console.log(formEl);
    if (!formEl) {
        return false;
    }
    else {
        num = num ? num : 5;
        var fieldset = document.createElement('fieldset'),
            newInput;
        for (var i = 0; i < num; i++) {
            newInput = document.createElement('input');
            newInput.value = defaultVal || '';
            newInput.type = inputType || 'text';
            fieldset.appendChild(newInput);
        }
        formEl.insertBefore(fieldset, insertAt);
    }
}

var formEl = document.getElementById('theForm'),
    aElem = document.getElementById('aElement');

if (window.addEventListener) {
    // up to date browsers
    aElement.addEventListener('click', function() {
        addInput(this, formEl, 10);
    }, false);
} else if (window.attachEvent) {
    // legacy IE, <9
    aElement.attachEvent('onclick', function() {
        addInput(this, formEl);
    });
}​

JS小提琴演示 。

我沒有IE測試，但上面應該使用attachEvent后退的IE <9，而我認為> = 9實現標准的addEventListener() 。

參考文獻：

• addEventListener() 。
• attachEvent() 。
• document.createElement() 。
• insertBefore() 。

Answer 4

嘗試使用JQuery .append（）函數

$("a").click(function(e){
 $("form").append("<input />");
})

Answer 5

是的，jquery是去這里的方式。

$("<input type='text'>").appendTo("#someContainer");

祝好運。

Answer 6

以下示例在單擊鏈接時添加輸入框：

<div id="start">
    <input/><br/><br/>
</div> 
<a href="#" id="box">Add more fields</a>

---

$("#box").click(function(){
    var add="";
    add+='<input/>'+'<br/>'+'</br/>';
    $("#start").append(add);
});

Answer 7

<script type='text/javascript'>
    var counter = 1;
    var limit = 3;
    function addInput(divName) {

        var newdiv = document.createElement('div');
        newdiv.innerHTML = "<br><input type='text' name='myInputs" + counter + "'> <input type='text' name='myInputs" + counter + "'> <select><option value='88888'>888888888</option></select>";
        document.getElementById(divName).appendChild(newdiv);
        counter++;
    }
</script>

<form method="POST">
    <div id="dynamicInput">

        <input type="button" value="Add another text input" onclick="addInput('dynamicInput');">
</form>