Javascript Jquery在单击时动态创建HTML div

我在为我的问题寻找方向

我有HTML div，我想在用户单击id为plus-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);

        });

 $(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);
 });

$（文档）.on（'click'，'plus-1'，function（）{
var html=“”
???
+ "";
$（'#tab'）。追加（html）；
});

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

为您制作了一个JSFIDLE-。html中也有错误，您需要在

请注意，

[id^='plus']

类型选择器效率很低，意味着速度很慢。考虑使用类而不是ID，这样您就避免了更改ID所需的所有代码，因为您无法在页面上具有相同ID的元素。

为您制作了一个JSoFIDLE。html中也有错误，您需要在

请注意，

[id^='plus']

类型选择器效率很低，意味着速度很慢。考虑使用类而不是ID，这样您就避免了更改ID所需的所有代码，因为您不能在页面上具有相同ID的元素。 Jquery

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

        });

 $(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);
 });

演示

Jquery

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

        });

 $(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);
 });

---

是否也要复制“加号1”按钮？是否也要复制“加号1”按钮？是<代码>$（此）指单击的元素<代码>父项（“行”）是它的父项。而

clone（）

是一个jQuery函数，用于创建一组匹配元素的副本。对于

[id^='plus']

它意味着选择所有元素，其

id

属性以

'plus'

开头

新的
是一个保留字。答案更好。谢谢你的帮助，你是说你接受的那个。请注意，它会生成无效的HTML，这是我在评论中说的。是的<代码>$（此）
指单击的元素<代码>父项（“行”）

是它的父项。而

clone（）

是一个jQuery函数，用于创建一组匹配元素的副本。对于

[id^='plus']

它意味着选择所有元素，其

id

属性以

'plus'

开头

新的
是一个保留字。答案更好。谢谢你的帮助，你是说你接受的那个。请注意，它会生成无效的HTML，我在评论中已经说明了这一点。
select
和
input
在克隆元素中，它们的ID和名称与代码相同。此外，您的克隆元素plus按钮不会触发任何事件，因为其id将不同，委派事件仅适用于
plus-1
select
，克隆元素内部的
input
将与您的代码具有相同的id和名称。此外，克隆的element plus按钮不会触发任何事件，因为其id将不同，并且委派事件仅适用于
plus-1