Cloning and appending a div

Question

I am trying to clone a div and all of its children, and append the clone onto the end of the original when the user clicks a button and change the id of child element, but for some reason I can't even get my div to clone and append.

<div id="section">
    //bunch of textboxes, labels, etc.
</div>

Here is my button

<input type="button" value="Add New Section" id="addSection"/>

Here is my Jquery

$(function() {
    var $section = $("#section").clone();  

    $( "#addSection" ).click(function() { 
        $section.append(); // I've tried this and appendTo, Insert, InstertAfter, After, etc.. still cannot get this to work.. 
    });
});

Ignore the fact that this doesn't change any child element id's, why is this not cloning and appending?

EDIT

I guess to clarify, I am trying to clone the original state of my div and append that every time my button is clicked.

Append to what? You need to specify selector to append the element. For ex. `$('#section').append($section)` — Shaunak D, Apr 13 '15 at 17:56
I assume you want the clone button to work repeatedly, and not just once. Yes? — showdev, Apr 13 '15 at 18:07
@BigRabbit Then I'm confused why you accepted the answer from ShaunakD and not PaulRoub. — showdev, Apr 13 '15 at 18:18

Nielarshi · Accepted Answer · 2015-04-13T18:14:56.090

2

You need to pass the content in jQuery's append function.

Ex -

$('#YOUR_ELEMENT_ID').append('YOUR_CONTENT')

Here it will be like,

$(function() {    
  var $section = $("#section").clone(); 
    $( "#addSection" ).click(function() { 
        var $sectionClone = $section.clone();
        $('#section').append($sectionClone); 
    });
});

Working Demo HERE

edited Apr 13 '15 at 18:14

answered Apr 13 '15 at 17:56

Nielarshi

1,126
7
11

I need everything to be cloned prior to my click so this doesn't work for me. – BRBT Apr 13 '15 at 17:58
What you want to clone. ? Everything means ? – Nielarshi Apr 13 '15 at 18:03
1

I think the OP means that he doesn't want the *cloned* content to be cloned -- just the original content. With your code, the appended content grows longer each time it is cloned. – showdev Apr 13 '15 at 18:08
1

Oh..maybe I had not understood what he wanted exactly at first. Anyway, I have edited the answer now. Thanks :) – Nielarshi Apr 13 '15 at 18:17

score 1 · Answer 2 · answered Apr 13 '15 at 17:55

Assuming you want to insert the cloned section after the original, we'd want to clone on the click (not before), so this will work if called more than once.

Then we replace the id (I'm using the current time to make the id unique, you could do something else), and insertAfter() to place it after our original element:

$("#addSection").click(function() {

  var section = $("#section").clone();

  section.attr('id', 'section' + (new Date()).getTime());

  section.insertAfter( $('#section') );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="section">
  <p>bunch of textboxes, labels, etc.</p>
</div>

<input type="button" value="Add New Section" id="addSection" />

I need it to be cloned with its original content that is why I was running the clone before my click, but I need my button to work multiple times — BRBT, Apr 13 '15 at 18:28

Shaunak D · Answer 3 · 2015-04-13T18:37:21.520

1

You need to specify a selector to append the element to.

$('#section').append($section)

Or

$section.appendTo('#section')

Or use .after() to insert the cloned element after the original.

$('#section').after($section)

Edit : You need to clone the element after click to make it work everytime.

So integrated function,

$(function(){
    $( "#addSection" ).click(function(){
        var $section = $("#section").clone();  
        $section.attr('id','someUniqueId');
        $('#section').after($section); 
    });
});

Demo

edited Apr 13 '15 at 18:37

answered Apr 13 '15 at 17:59

Shaunak D

20,588
10
46
79

This only clones and appends once, I need it to work multiple times – BRBT Apr 13 '15 at 18:23
I dont think it would clone multiple times of you init the cloned section before click. – Shaunak D Apr 13 '15 at 18:28
Ok, how would I clone my div with its original contents, and append it each time my button is clicked? – BRBT Apr 13 '15 at 18:35
@ShaunakD I still get the problem of it cloning any content that was added to the div with this solution. – BRBT Apr 13 '15 at 18:48

score 0 · Answer 4 · answered Apr 13 '15 at 17:58

0

Try this:

$(function(){
  var $section = $("#section").clone();  

  $( "#addSection" ).click(function() { 
    $("#section").append($section);
  });
});

answered Apr 13 '15 at 17:58

Daniel Eisenhardt

521
5
14

This will only clone once. Also, a description of your solution would be helpful. – showdev Apr 13 '15 at 18:00
1

@showdev Did you test that claim? I had it append every time i clicked the button on plunker. – Daniel Eisenhardt Apr 13 '15 at 18:09
1

[Yes, I did](http://jsfiddle.net/4qpd04kh/). It might be helpful to provide a runnable snippet (or link to) your working version. – showdev Apr 13 '15 at 18:10

Cloning and appending a div

4 Answers4