javascript - Jquery 在点击时动态创建 HTML div

Question

我正在为我的问题寻找方向。

我有 HTML div，我想在用户点击带有 id 加 1 的 span 时复制它。 这是我的html

<div id = “tab”>
<div class="row">
    <div>
        <select id="ProjectsFolder0FolderId" name="data[ProjectsFolder][0][folder_id]">
            <option value="1">Project Presentation</option>
            <option selected="selected" value="4">Project Root</option>
        </select>                
    </div>
    <div>
        <div>
            <input type="text" required="required" id="ProjectsFolder0Linux" value="xyz"  name="data[ProjectsFolder][0][linux]">
        </div>           
    </div>
    <div id="plus-1" >
                <span>
                    Click here
                </span>
    </div>
</div>
</div>

Jquery

$(document).on('click', '#plus-1' , function() {
        var html = "<div class=\"row\" >"
                  ???
                 + "</div>";
    $('#tab').append(html);

        });

它附加在 jquery 中定义的 html 之上，但我不知道如何在每次点击时按照上面的要求有效地附加整个 HTML。

Answer 1

演示 FIDDLE

Jquery

 $(document).on('click', '#plus-1' , function() {   
        var html = $(this).parent().clone();
        html.find('#plus-1').attr('id','plus-'+($('#tab').find('.row').length+1));
        $('#tab').append(html);
 });