jquery clone div and append it after specific div

Question

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     quot div id   car   last quot   after  put the clone div here

User · Answer

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    x000D   x000D    document  ready function    x000D          clone btn   click function    x000D            car parent   append     car2   clone     x000D          x000D      x000D   car-well  x000D    border 1px solid  ccc  x000D    text-align  center  x000D    margin  5px  x000D    padding 3px  x000D    font-weight bold  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt div id  car parent  gt  x000D     lt div id  car1  class  car-well  gt Normal div lt  div gt  x000D     lt div id  car2  class  car-well  style  background-color lightpink color blue  gt Clone div lt  div gt  x000D     lt div id  car3  class  car-well  gt Normal div lt  div gt  x000D     lt div id  car4  class  car-well  gt Normal div lt  div gt  x000D     lt div id  car5  class  car-well  gt Normal div lt  div gt  x000D   lt  div gt  x000D   lt button type  button  id  clone btn  class  btn btn-primary  gt Clone lt  button gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

try this out     div id   car   last   after     car2   clone

User · Answer

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    lt style gt   element-storage       display  none      top  0      right  0      position  fixed      width  0      height  0     lt  style gt    lt script gt      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        lt  script gt    lt div id  element-storage  gt     lt div id  template  gt       lt p gt Hello  firstname   lastname  lt  p gt     lt  div gt   lt  div gt    lt div id  new-div  gt    lt  div gt

User · Answer

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

[jquery] jquery clone div and append it after specific div

Examples related to jquery

Examples related to clone