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

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

应追加相同的元素行

<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> 

星期日
06
是
颗粒物
到
08
是
颗粒物
IST

试试这个：

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

我想这就是你想要的！

---

感谢Regent使用此代码

<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> 

• 删除代码-

函数deleteRow（curDelete）{

$（curDelete）.closest（'div'）.closest（'div'）.remove（）；
}

• 用于添加

  Html

  ，并使用函数获取所有内部Html内容
  • 请参见删除代码

使用

<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> 

您也可以使用，但这里有一些区别：

.clone

可同时用于多个元素，而

.html（）

仅返回第一个元素的html

.clone

返回jQuery对象，而

.html

返回字符串

.clone

可以（如果指定）保留DOM元素的任何事件和数据

.html

无法

.clone

保留根元素，而

.html

仅获取内部html

---

查看更多详细信息

您可以使用JavaScript完成此操作。也许也可以使用jQuery。是否要在页面中添加相同的字段？什么是

#addRow

，相同元素行在哪里？@ekad查看

#addRow

@Parag122的编辑问题-接受答案将帮助其他人找到正确的解决方案。很高兴为您提供帮助：）SO中有许多答案，其中有“使用此代码”甚至“您必须使用此代码”，但没有任何解释。是的，这个问题应该结束，因为它是关于“为我写代码，因为我想要一些东西，但不介意自己尝试去做”。但至少链接到

.append（）

、

.html（）

和jQuery的选择器会有所帮助。@Regent-同意you@Prog-谢谢你，你也能帮我删除记录吗？如果单击$（.deleteRecord），我想删除相应的记录。我是新来的。我不明白。@Prog是的，您准备好编写删除元素的代码了吗？：）然后用于计算时间、基于时间显示图像/文本、处理顶部菜单、将所选日期保存到localStorage以及其他任何功能？抱歉！谢谢你的更正@Regent

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