Optimized image swapping. jQuery required

CSS Setup

.button {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}
#img1,
#img2 {
    float: left;
    margin: 5px;
}

HTML Setup

<p class="button swapimage_ele">swap image element</p>
<p class="button swapimage_src">swap image src</p>
<br />
<div id="img1">
    <img src="http://farm8.staticflickr.com/7244/7339763896_6b3a7487fe_s.jpg" />
</div>
<div id="img2">
    <img src="http://farm9.staticflickr.com/8016/7339765048_d83ffbb15d_s.jpg" />
</div>

Javascript Setup

$('.swapimage_ele').on("click", function(evt){
    var img1 = $("#img1").html();
    var img2 = $("#img2").html();
    
    $("#img1").html(img2);
    $("#img2").html(img1);
});

$('.swapimage_src').on("click", function(evt){
    var img1 = $("#img1 img").attr("src");
    var img2 = $("#img2 img").attr("src");
    
    $("#img1 img").attr("src", img2);
    $("#img2 img").attr("src", img1);
});