Add div dynamically on button click using jQuery

Question

I want to add div structure everytime I click the button to add an address using jQuery

<div id="container">
      <div class="address">
           <div class="input-reg rb-item input-group">
                 <span class="input-group-addon">Address </span>
                 <input type="text" class="form-control" placeholder="Insert text here">
           </div>
           <div align="center"><iframe class="map-img" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe></div>
       </div>
</div>
<div align="center" style="margin-top: 10px"><button id="btnAddAddress" class="btn btn-warning btn-md" type="button">Add Address</button></div>

and this is what I've tried but not working

<script type="text/javascript">
    $("#btnAddAddress").click(function () {
      $("#container").append('<div class="address"><div class="input-reg rb-item input-group"><span class="input-group-addon">Address </span><input type="text" class="form-control" placeholder="Insert text here"></div><div align="center"><iframe class="map-img" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe></div></div>');
    });
</script>

Have you got something like this somehwere in your code: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>? — sideroxylon
– sideroxylon, Commented Sep 29, 2014 at 12:01

Kartikeya Khosla · Accepted Answer · 2014-09-29 12:15:22Z

4

You have to enclose your jquery code inside $(document).ready() block as shown :-

$(document).ready(function(){
  //Jquery code here
});

OR

$(document).on('click', '#btnAddAddress', function() 
{...});

and lastly don't forget to add jquery library file on your page.

Note :- Second answer should normally be used in case when we dynamically add html to the DOM otherwise use first answer.

Working Demo

edited Sep 29, 2014 at 12:15

answered Sep 29, 2014 at 11:56

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

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

9 Comments

Kartikeya Khosla Over a year ago

@Azrael..jquery code should be inside document.ready block..plz read the docs carefully...

Kartikeya Khosla Over a year ago

@user3667305...just enclose jquery code inside document.ready() as shown here.

webkit Over a year ago

Actually he has a point.. Since .click() is being used here and not .on('click'...) .. then the doc needs to be loaded in order to FIND the element on which to add an event listener on..

webkit Over a year ago

@user3667305 You should either do what Kartikeya suggested or.. $(document).on('click', '#btnAddAddress', function() {...} .. or both..

Regent Over a year ago

@webkit $(document).on('click', '#btnAddAddress' is bad idea in case of perfomance.

|

Suresh Ponnukalai · Accepted Answer · 2014-09-29 12:03:50Z

1

Your code is working fine here. Also I have simplified your code like below.

$("#btnAddAddress").click(function () {
     $("#container").append($(".address").html());
});

answered Sep 29, 2014 at 12:03

Suresh Ponnukalai

14k5 gold badges36 silver badges54 bronze badges

Comments

Sreeraj · Accepted Answer · 2014-09-29 12:39:44Z

The code you provided will work with out any modifications, if the js code is written after the button. i.e.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
      <div class="address">
           <div class="input-reg rb-item input-group">
                 <span class="input-group-addon">Address </span>
                 <input type="text" class="form-control" placeholder="Insert text here">
           </div>
           <div align="center"><iframe class="map-img" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe></div>
       </div>
</div>
<div align="center" style="margin-top: 10px"><button id="btnAddAddress" class="btn btn-warning btn-md" type="button">Add Address</button></div>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
    $("#btnAddAddress").click(function () {
      $("#container").append('<div class="address"><div class="input-reg rb-item input-group"><span class="input-group-addon">Address </span><input type="text" class="form-control" placeholder="Insert text here"></div><div align="center"><iframe class="map-img" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe></div></div>');
    });
</script>

Make sure that the button and jquery is loaded before your code is executed. The best option is provided by "Kartikeya".

Ariadna · Accepted Answer · 2014-09-29 12:02:20Z

0

You need to add "return false;" at the end of click function.

$("#btnAddAddress").click(function () {
   $("#container").append('<div class="address"><div class="input-reg rb-item input-group"><span class="input-group-addon">Address </span><input type="text" class="form-control" placeholder="Insert text here"></div><div align="center"><iframe class="map-img" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe></div></div>');
   return false;
});

JSFiddle Example

answered Sep 29, 2014 at 12:02

Ariadna

262 bronze badges

Collectives™ on Stack Overflow

Add div dynamically on button click using jQuery

4 Answers 4

9 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related