CODEWITHSUNDEEP
jquery-selectorsjquery
Mythriel
Mythriel

Reputation: 1380

how to insert an image into a div with jquery

I have the following markup: <div class="user-photo"> <img src="" /> </div>

I want to insert an image in that div when I click another image on a page. My code looks like this: $('body').on('click', '.image', function() { $('.user-photo').children('img').attr('src', $(this).attr('src')); });

But it is not working

Upvotes: 1

Views: 1607

Answers (3)

mgraph
mgraph

Reputation: 15338

demo: http://jsfiddle.net/WnC9B/8/

$('body').on('click', '.image', function(e) {
  $('.user-photo').children('img').attr('src', $(e.target).attr('src'));
 });​

Upvotes: 2

Hiren H Patel
Hiren H Patel

Reputation: 167

You can use the .tmpl() of jquery. It will be used to append html content in div in your case.

$.tmpl("<div class="user-photo"> <img src='' /> </div>")..appendTo("#targetdiv");

Another way is:

$('#div').html('<div class="user-photo"> <img src='' /> </div>')

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

I think you are using this in the wrong way (this refers to the bodyin this example, you should use e.target to refer to the clicked element)

$('body').on('click', '.image', function(e) { 
  $('.user-photo > img').attr('src', $(e.target).attr('src')); 
});

Upvotes: 0

Related Questions