CODEWITHSUNDEEP
javascriptjqueryhtmlimage
Filip G.
Filip G.

Reputation: 37

Add picture to div with jQuery click

I want to click on div with btnGenerate class and that is supposed to add an image to div with card1 class.

HTML

<div class="btnGenerate">
    <p class="generate">Generate team</p>
</div>
<div class="card1"></div>

JS

$(document).ready(function () {
    $('.btnGenerate').click(function () {
        $('.card1').prepend('<img class="card" src="card1">');
    });
});

Problem

When I click on .btnGenerate it doesn't add an image to my .card1. So I want it to add my image to the class

Upvotes: 0

Views: 77

Answers (2)

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17944

You code looks OK. You just need to add the proper image path to src of img element :

$(document).ready(function () {
    $('.btnGenerate').click(function () {
        $('.card1').prepend('<img class="card" src="http://placehold.it/100x50/ff7878">');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btnGenerate">
    <p class="generate">Generate team</p>
</div>
<div class="card1"></div>

Upvotes: 1

Yandimirkin Vladislav
Yandimirkin Vladislav

Reputation: 184

Maybe just not add any extensions to link or path problems for example that works well :

$(document).ready(function() {
  $('.btnGenerate').click(function() {
    $('.card1').prepend('<img class="card" src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a">');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btnGenerate">
  <p class="generate">Generate team</p>
</div>

<div class="card1"></div>

Upvotes: 1

Related Questions