Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add a div when clicking a button in jquery?

Tags:

jquery

I need to add the following div structure when i click button at every time? I need to generate the following whole div structure at every time of clicking the button using jquery.

<div class="module_holder">
<div class="module_item">
<img src="images/i-5.png" alt="Sweep Stakes"><br>sendSMS
</div>
</div>

help me.

Thanks Ravi

like image 646
Ravichandran Jothi Avatar asked Jul 13 '11 11:07

Ravichandran Jothi


People also ask

How to make div appear with button?

To display or hide a <div> by a <button> click, you can add the onclick event listener to the <button> element. The onclick listener for the button will have a function that will change the display attribute of the <div> from the default value (which is block ) to none .


2 Answers

You need a container div that you can insert it into:

<div id="container"></div>

Then you can use the append() method of jquery:

$("#somebutton").click(function () {
  $("#container").append('<div class="module_holder"><div class="module_item"><img src="images/i-5.png" alt="Sweep Stakes"><br>sendSMS</div></div>');
});
like image 192
rtpHarry Avatar answered Oct 11 '22 07:10

rtpHarry


Try this out http://jsfiddle.net/4dEsJ/1/ I'm sure there are better ways of creating the element, but if the structure and content remains the same, this works!

like image 28
James Avatar answered Oct 11 '22 09:10

James