jQuery jquery克隆div并将其附加在特定的div之后
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8707756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery clone div and append it after specific div
提问by cyberfly
Hi guys, from the picture above, I want to clone the div with id #car2 and append it after the last div with id start with car, in this example id #car5. How i can do that? Thanks.
大家好，从上图中，我想克隆 ID 为 #car2 的 div，并将其附加在最后一个 id 以 car 开头的 div 之后，在本例中为 id #car5。我怎么能这样做？谢谢。
This is my try code:
这是我的尝试代码：
$("div[id^='car']:last").after('put the clone div here');
回答by letuboy
You can use clone, and then since each div has a class of car_well you can use insertAfter to insert after the last div.
您可以使用 clone，然后由于每个 div 都有一个 car_well 类，因此您可以使用 insertAfter 在最后一个 div 之后插入。
$("#car2").clone().insertAfter("div.car_well:last");
回答by mcgrailm
try this out
试试这个
$("div[id^='car']:last").after($('#car2').clone());
回答by Haritsinh Gohil
You can do it using clone()function of jQuery, Accepted answer is ok but i am providing alternative to it, you can use append(), but it works only if you can change html slightly as below:
您可以使用clone()jQuery 的功能来做到这一点，接受的答案是可以的append()，但我提供了它的替代方案，您可以使用，但只有在您可以稍微更改 html 时才有效，如下所示：
$(document).ready(function(){
$('#clone_btn').click(function(){
$("#car_parent").append($("#car2").clone());
});
});.car-well{
border:1px solid #ccc;
text-align: center;
margin: 5px;
padding:3px;
font-weight:bold;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="car_parent">
<div id="car1" class="car-well">Normal div</div>
<div id="car2" class="car-well" style="background-color:lightpink;color:blue">Clone div</div>
<div id="car3" class="car-well">Normal div</div>
<div id="car4" class="car-well">Normal div</div>
<div id="car5" class="car-well">Normal div</div>
</div>
<button type="button" id="clone_btn" class="btn btn-primary">Clone</button>
</body>
</html>回答by plaidcorp
This works great if a straight copy is in order. If the situation calls for creating new objects from templates, I usually wrap the template div in a hidden storage div and use jquery's html() in conjunction with clone() applying the following technique:
如果直接复制是有序的，这很有效。如果情况需要从模板创建新对象，我通常将模板 div 包装在一个隐藏的存储 div 中，并结合使用 jquery 的 html() 和 clone() 应用以下技术：
<style>
#element-storage {
display: none;
top: 0;
right: 0;
position: fixed;
width: 0;
height: 0;
}
</style>
<script>
$("#new-div").append($("#template").clone().html(function(index, oldHTML){
// .. code to modify template, e.g. below:
var newHTML = "";
newHTML = oldHTML.replace("[firstname]", "Tom");
newHTML = newHTML.replace("[lastname]", "Smith");
// newHTML = newHTML.replace(/[Example Replace String]/g, "Replacement"); // regex for global replace
return newHTML;
}));
</script>
<div id="element-storage">
<div id="template">
<p>Hello [firstname] [lastname]</p>
</div>
</div>
<div id="new-div">
</div>
