trying to get jquery to load html

trying to get jquery to load html

I can load up html like this
$('#grid').empty();
for (i in main_images) {
$('#grid').append($('<li gallery="'+i+'"><div class="title">'+(titles[i]
)+'</div><a href="#" class="zoom"><img src=
'+main_images[i]+'/><span></span></a></li>'));
}
but I can't seem to do it for this.
<div id="container" boarder ="0">
<ul><li><img src="'+img+'"/></li></ul>
<span class="button prevButton "></span>
<span class="button nextButton"></span>
<span> <a href="#" class="zoom_back"></a></span>
<span> <a href="#" class="zoom_big"></a></span>
<span> <a href="#" class="info"></a></span>
<span> <a href="#" class="info_on"></a></span>
<span> <a href="#" class="info_box"></a></span>
<span> <a class="info_box_title">title</a></span>
<span> <a class="info_box_status">status</a></span>
<span> <a class="info_box_about"> about about </a></span>
<span> <a href="#" class="box_counter" ></a></span>
</div>
I tried this but it throws an error
$('#container').empty();
$('#container').append($('<ul><li><img src="'+img+'"/></li></ul>
<span class="button prevButton "></span>
<span class="button nextButton"></span>
<span> <a href="#" class="zoom_back"></a></span>
<span> <a href="#" class="zoom_big"></a></span>
<span> <a href="#" class="info"></a></span>
<span> <a href="#" class="info_on"></a></span>
<span> <a class="info_box"></a></span>
<span> <a class="info_box_title">title</a></span>
<span> <a class="info_box_status">status</a></span>
<span> <a class="info_box_about"> about</a></span>
<span> <a href="#" class="box_counter" ></a></span>
'));