javascript - load an image after clicking a button -

i have <button> rel="example.jpg". want button load image in #area div, after clicking on it, not page load. use code , done:

$(document).ready(function(){ $("button").click(function(){     var imgurl = $(this).attr('rel');     $("#area").html("<img src='" + imgurl + "' alt='description' />"); }); });  <button rel="example.jpg">click me</button> <div id="area"></div> 

here jsfiddle.

now found rel not valid <button>.

i'm interested know other solutions this, such using jquery .data()

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' />"); });