add image/s inside a div with jquery

Question

Every time I click on a button <button class="xx type="submit" id="add_football">Add</button>

I want to add a image(<img src="img/door-right.png">)inside the <div class="ball_footballbox"><img src</div>

How do I do that with jQuery?

This question has been answered before: the first google result for "jquery insert image into div" is http://stackoverflow.com/questions/941206/jquery-add-image-inside-of-div-tag . Not to be a dick, but please do some of your own research before posting a question. — asifrc, Feb 12 '13 at 10:18
P.S. http://api.jquery.com/click/ and http://api.jquery.com/category/manipulation/dom-insertion-inside/ should help you learn everything you need to answer your own question. Comment/Let me know if you need some good tutorials :) — asifrc, Feb 12 '13 at 10:22
P.P.S, In retrospect, I do come off as a dick lol (too much time has passed to edit the comment). I just wanted to let you know that it's a courtesy to do you're own research before posting a question, especially when it has been answered before, to avoid cluttering the site. I flagged this post as a duplicate to that end, nothing personal. When learning to code, Google is you're best friend (and half the time, it'll lead you right back to SO). Welcome to SO :) — asifrc, Feb 12 '13 at 10:31
@asifrc You're not being off with the OP - this question is an exact duplicate and will *should* be deleted. — Jimbo, Feb 12 '13 at 10:51

score 4 · Accepted Answer · answered Feb 12 '13 at 10:15

4

Or $('<img src="img/door-right.png">').appendTo(".ball_footballbox");

answered Feb 12 '13 at 10:15

arnaud

score 0 · Answer 2 · answered Feb 12 '13 at 10:12

0

Try this

$(".ball_footballbox").append('<img src="img/door-right.png">');

wrap this in a function and call this function on click of button action.

answered Feb 12 '13 at 10:12

Sudip Pal

Pandian · Answer 3 · 2013-02-12T11:06:41.000

0

try like below... it will work

HTML :

<button class="xx" type="submit" id="add_football">Add</button>
<div class="ball_footballbox"></div>

JQuery :

$("#add_football").click(function() {
$('.ball_footballbox').prepend('<img id="theImg" src="img/door-right.png" prepended="yes"/>')
});

edited Feb 12 '13 at 11:06

answered Feb 12 '13 at 10:18

Pandian

And what if I add a delete button. To delete one image? – user2064285 Feb 12 '13 at 10:56
@user2064285 try this fiddle : http://jsfiddle.net/RYh7U/75/ here i have write the delete image – Pandian Feb 12 '13 at 11:03
@user2064285 try this fiddle : http://jsfiddle.net/RYh7U/77/ Here i have code that add and delete image on button HOVER Event... – Pandian Feb 12 '13 at 11:05
@user2064285 try this http://jsfiddle.net/LX33c/1/, Here i have delete the image which added last. – Karthi Keyan Feb 12 '13 at 11:08
Maybe to much to ask. But what if I use a select box, and want to add 1,2 or 3 pictures at one click? http://jsfiddle.net/LX33c/5/ – user2064285 Feb 12 '13 at 13:45

score 0 · Answer 4 · answered Feb 12 '13 at 10:20

0

Take a look at this Demo this will help you to get the answer for adding images.

$("#add_football").click(function(){
$('<img src="http://jqfaq.com/wp-content/uploads/logo_v1.png">').appendTo($(".ball_footballbox"));
});

i hope this will help you more.

answered Feb 12 '13 at 10:20

Karthi Keyan

4 Answers4