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

试试这个：

<script>
$(document).ready(function(){
    var divID='abc';
    var $mainDiv=$('#'+divID);
    $mainDiv.find('input[name="addNewRow"]').eq(0).click(function(){
        var $this=$(this);
        var $div=$(this).parents('div').eq(0).prev('div').clone();
        $this.parents('div').eq(0).prev('div').after($div);
    });
});
</script>

演示：http://jsfiddle.net/xT62m/

Answer 2

您可以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/

Answer 3

是的，使用jquery追加功能https://api.jquery.com/append/

$('#1').append(html);

这是一个有效的jsfiddle http://jsfiddle.net/ZqQAu/1/

Answer 4

最好的方法是克隆要添加到div的{{1}}。

为了便于操作，请使用按钮向div#1添加课程，并向表示行的每个div添加课程。

HTML：

div

Javascript（使用jQuery）：

<div id = 'id1'>
    <div class='row'>
        <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 class='buttonHolder'>
        <input type="button" name="addNewRow" value="Add Row" />                      
    </div>
</div>

jsFiddle example: http://jsfiddle.net/9Z2RT/1/

Answer 5

制作像这样的HTML：

<div id="container">
<div class= 'template'>
    <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>
</div>

<div>
        <input type="button" name="addNewRow" id="btnAddRow" value="Add Row" />                      
</div>

点击功能：

$('#btnAddRow').click(function(){


var row = $('.template').first().clone();

$('#container').append(row);

});

这是Fiddle DEMO

Answer 6

最简单的方法是：

<!DOCTYPE HTML>

<html>
    <head>
        <title>Untitled</title>
        <script>
            var m_TextToAdd = '<div> ';
            m_TextToAdd += '<div> ';
            m_TextToAdd += '    <label class="right inline">Response:</label>';
            m_TextToAdd += '</div>';
            m_TextToAdd += '<div>';
            m_TextToAdd += '    <input type="text" name="responseText[]" value="" maxlength="400" /> ';
            m_TextToAdd += '</div>';
            m_TextToAdd += ' <div>';
            m_TextToAdd += '    <input type="radio" name="responseRadio[]" value="" />';
            m_TextToAdd += ' </div>';
            m_TextToAdd += '</div>';
            function AddContent() {
                document.getElementById('div1').innerHTML += m_TextToAdd;
            }

        </script>
    </head>

    <body>
        <div id = 'div1'>
            <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" onclick='AddContent();'/>                      
            </div>
        </div>
    </body>
</html>

无论如何，我的眼睛看到它的心脏:-) 我认为下一个代码更具可读性：

<!DOCTYPE HTML>

<html>
    <head>
        <title>Untitled</title>
        <script type='text/javascript'>
            function AddContent() {
                var dest = document.getElementById('div1');
                //add label
                var lbl = document.createElement('label');
                lbl.innerHTML = 'Response:';
                lbl.className = 'right inline';
                dest.appendChild(lbl);
                //add line break
                dest.appendChild(document.createElement('br'));

                //add text input
                var input = document.createElement('input');
                input.type = 'text';
                input.name = 'responseText[]';
                input.maxlength="400";
                dest.appendChild(input);
                //add line break
                dest.appendChild(document.createElement('br'));

                //add radio button
                input = document.createElement('input');
                input.type="radio";
                input.name="responseRadio[]";
                dest.appendChild(input);
                //add line break
                dest.appendChild(document.createElement('br'));
            }

        </script>
    </head>

    <body>
        <div id = 'div1'>
            <label class="right inline">Response:</label>
            <br>
            <input class='nextLine' type="text" name="responseText[]" value="" maxlength="400" />                          
            <br>
            <input class='nextLine' type="radio" name="responseRadio[]" value="" />                          
            <br>
            <input class='nextLine' type="button" name="addNewRow" value="Add Row" onclick='AddContent();'/>                      
            <br>
    </body>
</html>

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

6 个答案:

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