javascript - 使用 JavaScript/JQuery 将 HTML 重新添加到 DIV 中

Question

大家好，我有以下 Div，如下所示:

<div id = '1'>
    <div>
        <div>
            <label class="right inline">Response:</label>
        </div>
        <div>
            <input type="text" name="responseText[]" value="" maxlength="400" />                          
        </div>
         <div>
            <input type="radio" name="responseRadio[]" value="" />                          
         </div>
    </div>
    <div>
        <input type="button" name="addNewRow" value="Add Row" />                      
    </div>
</div>

当用户点击按钮时，我想再次添加以下div:

        <div>
            <div>
                <label class="right inline">Response:</label>
            </div>
            <div>
                <input type="text" name="responseText[]" value="" maxlength="400" />                          
            </div>
             <div>
                <input type="radio" name="responseRadio[]" value="" />                          
             </div>
        </div>

这可以用 JavaScript 或 jQuery onclick 函数实现吗？

Answer 1

您可以使用 clone使用 insertAfter 的方法:

HTML:

<div id='1'>
    <div class="template"> <!-- mark a clone target -->
        ...
    </div>
    <div>
        <input type="button" name="addNewRow" value="Add Row" />
    </div>
</div>

JS:

var $template = $('.template');
$('input[type=button]').click(function() {
    $template.clone().insertAfter($template);
});

演示:http://jsfiddle.net/VcBrz/