用戶按下按鈕時如何從輸入區域添加相同內容？

Question

我現在正在做一個表單，我想在用戶按下按鈕時自動添加另一個輸入區域，與上面的行相同。

 <div class="row" id="1">
                <div class="form-group col-lg-2">

                        <select class="form-control" id="select">
                            <option selected>Tag Name</option>
                            <option value="p">p</option>
                            <option value="br">br</option>
                        </select>

                </div>
                <div class="form-group col-lg-2">
                        <select class="form-control" id="class">
                            <option selected>Tag Class</option>
                            <option value="Day">Day</option>
                            <option value="BlockTime">BlockTime</option>
                            <option value="BlockTitle">BlockTitle</option>
                            <option value="Session">Session</option>
                            <option value="Person">Person</option>
                            <option value="Firm">Firm</option>
                        </select>                      
                </div>                    
                <div class="form-group col-lg-7">
                    <textarea class="form-control" rows="3" id="textArea">Please put the content inside this html tag.</textarea>         
                </div>
                <div class="form-group col-lg-1">
                        <input type="button" class="btn btn-default" onclick="addLine()" value="Add">
                </div>                        
                </div>

這是一行輸入區域，當用戶按下“添加”按鈕時，我想在輸入區域下方添加相同的html。 也許使用JQuery？

它看起來應該像這樣。

這是我嘗試的：

function addLine() {
$('#1').clone().attr('id', '').appendTo('form');

}

目前看來，這是可行的，但是如果我想向新創建的元素（例如2、3、4）添加ID，該怎么辦？

另外，我不確定我是否正確或最佳方式。

Answer 1

jQuery解決方案

    var n = 8 // adjust it in some way
    var inputArea = ['<div class="form-group col-lg-'+n+'">',
'<textarea class="form-control" rows="3" id="textArea-'+n+'">',// let's be nice and not use same IDs twice
'Please put the content inside this html tag.',
'</textarea></div>'].join('') 
 $('.row').append(inputArea);

但是 ，請確保您的后端已准備好處理該輸入。

編輯：解決方案可能並不理想，並且使用clone（）也是完全可以的。 為了跟蹤id，我將添加一個簡單的變量，如n，每次添加新的輸入區域時，該變量都會增加，然后將其添加到id。

所以，init

var n = 0; 

在addLine中：

n++;

設置ID（也可以在addLine中使用）

$target.attr('id', 'inputArea-'+n);//Assuming that $target is the inputArea in question

Answer 2

您可以從DOM中的藍圖結構進行復制，然后在按鈕后附加副本。

var addline = function() {
    var invisibleNewLine = jQuery('#blueprint').clone();
    var visibleNewLine = invisibleNewLine.removeClass('invisible');
    jQuery('#target').append(visibleNewLine);
};
jQuery('#add-line').click(addline);

刪除元素上的onClick處理程序，並使用jQuery綁定事件。

<button id="add-line" class="btn btn-default">Add</button>

在這里查看小提琴： JSFiddle