Question

我想动态添加元素。我不知道怎么做。

应追加相同的元素行。

<div class="schedulingRecord">
    <div class="form-group pi-col-md-12 pi-margin-bottom-10">
        <div class="day-time pi-margin-bottom-10">
            <select class="form-control" style="padding:5px; width:100px; height: auto; font-size:13px; margin-right:20px;" name="day">
                <option>Sunday</option>
            </select> 
            <select class="form-control" style="padding:5px; width:55px; height: auto; font-size:13px; margin-right:5px;" name="startTime">
                <option>06</option>
            </select>
            <select class="form-control" style="padding:5px; width:55px; height: auto; font-size:13px; margin-right:5px;" name="startTimeCon">
                <option selected>AM</option>
                <option>PM</option>
            </select>to 
            <select class="form-control" style="padding:5px; width:55px; height: auto; font-size:13px; margin-right:5px;" name="endTime">
                <option>08</option>
            </select>
            <select class="form-control" style="padding:5px; width:55px; height: auto; font-size:13px; margin-right:20px;"name="endTimeCon">
                <option>AM</option>
                <option selected>PM</option>
            </select>
            <select class="form-control" style="padding:5px; width:70px; height: auto; font-size:13px; margin-right:5px;" name="timezone">
                <option>IST</option>
            </select>
            <a href="javascript:void(0);" class="pi-pull-right deleteRecord"><img src="images/delete-icon.png" alt="" title="Remove"/></a>
        </div>
    </div>
</div>
<a href="javascript:void(0);" class="pi-pull-right addRecord" id="addRow">
    <img src="images/add-icon.png" alt="" title="Add New" style="position:relative; top:-1px; right:4px;"/>
</a>

Answer 1

使用.clone()

$(".addRecord").on("click", function(){
    $(".form-group:first").clone(true).appendTo(".schedulingRecord");    
});

<强> Fiddle

你也可以使用.html()但是，这里有一些不同之处：

.clone可以同时用于多个元素，而.html()只返回第一个元素的html。
.clone返回一个jQuery对象，.html返回一个字符串。
.clone可以（如果指定）保留DOM元素的任何事件和数据。 .html 不能。
.clone保留根元素，而.html只获取innerHTML。

查看更多详情here

Answer 2

试试这个：

  $('.form-group').append($('.day-time:first').html());

这就是你想要的！感谢Regent

Answer 3

使用此代码： Working Code Here in jsFiddle

<a href="javascript:void(0);" onclick="addRow();" class="pi-pull-right addRecord" id="addRow">
    <img src="images/add-icon.png" alt="" title="Add New" style="position:relative; top:-1px; right:4px;"/> click
</a>

<强> JSCode

function addRow(){   
    $('.schedulingRecord').append($('.form-group').html());    
}

删除代码 -

function deleteRow(curDelete){ $(curDelete).closest('div').closest('div').remove(); }

使用.append()添加Html并使用.html()函数获取所有内部HTML内容
- 请参阅删除代码JsFiddle Here

如何在单击#addRow时动态添加相同的元素？

3 个答案: