load an image after clicking a button

Question

I have a with the rel=\"example.jpg\". I want the button to load the image in my #area DIV, just after

Answer 1

HTML

<button data-rel="example.jpg">Click Me</button>

jQuery

$("button").click(function () {
    var imgUrl = $(this).data('rel');
    $("#area").html("<img src='" + imgUrl + "' alt='description' />");
});

Answer 2

Change your code to this:

$(document).ready(function(){
$("button").click(function(){
    var imgUrl = $(this).data('rel');
    $("#area").html("<img src='" + imgUrl + "' alt='description' />");
  });
});

<button data-rel="example.jpg">Click Me</button>
<div id="area"></div>

Fiddle: http://jsfiddle.net/x3QdU/4/

Answer 3

change

<button rel=

to

<button data-rel=

http://jsfiddle.net/x3QdU/1/