jQuery click event then create multiple group of divs

Question

I have jQuery click event which is create group of div or container for every clicking the button . All I want is to create a container every click on a button.

Here is the HTML container create on every button click.

<button type="button" id="add_container">Add Container</button

<div class="container">
 <div class="label">
  <span>I'm the Label</span>
 </div>
 <div class="margin-select">
  <div class="padding-select">
   <select class="select2>
    <option>Choose 1</option>
    <option>Choose 2</option>
   </select>
  </div>
 </div>
</div>

jQuery:

$('#add_container').on('click', function(){
  //add a container every click event <div class="container">...</div>
})

Does this answer your question? How to append HTML using jQuery — Thanh Dao
– Thanh Dao, Commented Jun 20, 2022 at 8:23
If the .container element always exists in the DOM when the page loads then you can use clone() and append() — Rory McCrossan
– Rory McCrossan, Commented Jun 20, 2022 at 8:32

Vivek · Accepted Answer · 2022-06-20 08:27:45Z

3

First Create a dummy div as shown below -

HTML -

<button type="button" id="add_container">Add Container</button

<div class="repeat_container"></div>

JQuery -

$('#add_container').on('click', function(){
   var html = '<div class="container"><div class="label"><span>I'm the Label</span></div><div class="margin-select"><div class="padding-select"><select class="select2><option>Choose 1</option><option>Choose 2</option></select></div></div></div>'; 
  $('.repeat_container').append(html);
});

Hope it helps !!

answered Jun 20, 2022 at 8:27

Vivek

3751 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

4b0 · Accepted Answer · 2022-06-20 08:37:46Z

0

Use clone() with .insertAfter.

Example:

$('#add_container').on('click', function() {
  $(".container:first").clone().insertAfter("div.container:last")
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="add_container">Add Container</button

<div class="wrapper">
  <div class="container">
    <div class="label">
      <span>I'm the Label</span>
    </div>
    <div class="margin-select">
      <div class="padding-select">
    <select class="select2">
    <option>Choose 1</option>
    <option>Choose 2</option>
   </select>
  </div>
 </div>
</div>
</div>

answered Jun 20, 2022 at 8:37

4b0

22.4k30 gold badges97 silver badges143 bronze badges

Comments

Ivan Z. · Accepted Answer · 2022-06-20 08:39:00Z

You can add a container wrapper and append a child to it:

HTML:

<button type="button" id="add_container">Add Container</button>

<div class="wrapper">
    <div class="container">
        <div class="label">
            <span>I'm the Label</span>
        </div>
        <div class="margin-select">
            <div class="padding-select">
                <select class="select2">
                    <option>Choose 1</option>
                    <option>Choose 2</option>
                </select>
            </div>
        </div>
    </div>
</div>

jQuery:

$('#add_container').on('click', function(){

    console.log('Clicked!', 'add_container');

    $('.wrapper').append(
        '<div class="container">'
        + '<div class="label">'
            + '<span>I\'m the Label</span>'
        + '</div>'
        + '<div class="margin-select">'
            + '<div class="padding-select">'
                + '<select class="select2">'
                    + '<option>Choose 1</option>'
                    + '<option>Choose 2</option>'
                + '</select>'
            + '</div>'
        + '</div>'
    + '</div>');
})

Collectives™ on Stack Overflow

jQuery click event then create multiple group of divs

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related