Placing JSON retrieved image urls inside tags

Placing JSON retrieved image urls inside tags

I have a working JSON response with the following code:
In my html, I have:
<ol id="selectable"></ol>
In javascript I have:
<script type="text/javascript">
// json response ...
if (response.success) {
$.each(response.data.photos, function(i,photo){
$("<img/>").attr("src", photo.image_url).appendTo("#selectable");
if ( i == 20 ) return false;
});
}
This gives me:
<ol id="selectable">
<img src="a.jpg">
<img src="b.jpg">
<img src="c.jpg">
</ol>
But what I want is a list like this:
<ol id="selectable">
<li><img src="a.jpg"></li>
<li><img src="b.jpg"></li>
<li><img src="c.jpg"></li>
</ol>