77

enter image description here

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 can I do that? Thanks.

This is my try code:

$("div[id^='car']:last").after('put the clone div here');
peterh
  • 11,875
  • 18
  • 85
  • 108
cyberfly
  • 5,568
  • 8
  • 50
  • 67

4 Answers4

181

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.

$("#car2").clone().insertAfter("div.car_well:last");
letuboy
  • 1,945
  • 1
  • 11
  • 5
  • I'm trying to use the same to add multiple attachments to a form. Can you please explain how to remove this div with a neutral function (so basically, I would have 1 function to add div and another to remove last div) – Chablis Bshara Mar 02 '17 at 17:25
  • 1
    This works fine, but html() with an anonymous function is potentially more powerful, depending on application. https://stackoverflow.com/questions/8707756/jquery-clone-div-and-append-it-after-specific-div#answer-47063071 – plaidcorp Nov 01 '17 at 20:26
13

try this out

$("div[id^='car']:last").after($('#car2').clone());
mcgrailm
  • 17,469
  • 22
  • 83
  • 129
  • And how do I increase the id number to car 6 after clone? – Mikeys4u Dec 09 '15 at 13:48
  • @Mikeys4u i wasn't sure of the top of my head , I found this thread on the same topic http://stackoverflow.com/questions/10126395/how-to-jquery-clone-and-change-id – mcgrailm Dec 09 '15 at 17:33
6

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:

$(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>
Haritsinh Gohil
  • 5,818
  • 48
  • 50
1

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:

<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>
plaidcorp
  • 625
  • 6
  • 11