[英]How can I append div on click?
Lets say I have this div假设我有这个 div
<div class="row deliver-to forms">
<div class="col-4">
<label>Region</label>
<input class="w-50 mt-2 form-control" type="text" data-id="region-to" id="region-to">
</div>
<div class="col-4">
<label>District</label>
<input class="w-50 mt-2 form-control" type="text" data-id="district-to" id="district-to">
</div>
<div class="col-4">
<label>Town</label>
<input class="w-50 mt-2 form-control" type="text" data-id="town-to" id="town-to">
</div>
</div>
and this button还有这个按钮
<button class="btn btn-primary btn-flat mt-3 offset-10 add_place" type="button" id="add_place">
<i class="fa fa-plus"></i>
</button>
How can I actually append this entire div after itself by clicking on this button?如何通过单击此按钮实际附加整个 div?
Entire structure of my code looks like:我的代码的整个结构如下所示:
<div class="row deliver-to forms">
<div class="col-4">
<label>Region</label>
<input class="w-50 mt-2 form-control" type="text" data-id="region-to" id="region-to">
</div>
<div class="col-4">
<label>District</label>
<input class="w-50 mt-2 form-control" type="text" data-id="district-to" id="district-to">
</div>
<div class="col-4">
<label>Town</label>
<input class="w-50 mt-2 form-control" type="text" data-id="town-to" id="town-to">
</div>
</div>
<button class="btn btn-primary btn-flat mt-3 offset-10 add_place" type="button"
id="add_place">
<i class="fa fa-plus"></i>
</button>
$("button").click(function(){ $(".next").append("<div class=\\"row deliver-to forms\\">\\n" + " <div class=\\"col-4\\">\\n" + " <label>Region</label>\\n" + " <input class=\\"w-50 mt-2 form-control\\" type=\\"text\\" data-id=\\"region-to\\" id=\\"region-to\\">\\n" + " </div>\\n" + " <div class=\\"col-4\\">\\n" + " <label>District</label>\\n" + " <input class=\\"w-50 mt-2 form-control\\" type=\\"text\\" data-id=\\"district-to\\" id=\\"district-to\\">\\n" + " </div>\\n" + " <div class=\\"col-4\\">\\n" + " <label>Town</label>\\n" + " <input class=\\"w-50 mt-2 form-control\\" type=\\"text\\" data-id=\\"town-to\\" id=\\"town-to\\">\\n" + " </div>\\n" + " </div>")});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row deliver-to forms"> <div class="col-4"> <label>Region</label> <input class="w-50 mt-2 form-control" type="text" data-id="region-to" id="region-to"> </div> <div class="col-4"> <label>District</label> <input class="w-50 mt-2 form-control" type="text" data-id="district-to" id="district-to"> </div> <div class="col-4"> <label>Town</label> <input class="w-50 mt-2 form-control" type="text" data-id="town-to" id="town-to"> </div> </div> <button class="btn btn-primary btn-flat mt-3 offset-10 add_place" type="button" id="add_place"> <i class="fa fa-plus">click</i> </button> <div class="next"></div>
Step 1 : try to wrap this with a div of specific id.第 1 步:尝试用特定 id 的 div 包装它。
<div id="newrow">
<div class="row deliver-to forms">
<div class="col-4">
<label>Region</label>
<input class="w-50 mt-2 form-control" type="text" data-id="region-to" id="region-to">
</div>
<div class="col-4">
<label>District</label>
<input class="w-50 mt-2 form-control" type="text" data-id="district-to" id="district-to">
</div>
<div class="col-4">
<label>Town</label>
<input class="w-50 mt-2 form-control" type="text" data-id="town-to" id="town-to">
</div>
</div>
</div>
Step 2 : Create a variable in jquery and assign the element what you want to append.第 2 步:在 jquery 中创建一个变量并为元素分配要附加的内容。 Example:
例子:
var element = "<div> New Div Appending</div>"
Step3: Jquery to append to wrapped div.步骤 3:Jquery 附加到包装的 div。
$("#newrow").append(element)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.