js image swap not using innerHTML

<script type="text/javascript" charset="utf-8">
  function so_clearInnerHTML(obj) {
  	// so long as obj has children, remove them
  	while(obj.firstChild) obj.removeChild(obj.firstChild);
  };

  // create the anchor
  eAnchor<%= image.id %> = document.createElement("a");
  eAnchor<%= image.id %>.setAttribute("href", "#{image.file.url(:original)}");
  eAnchor<%= image.id %>.setAttribute("id", "project_main_image_anchor");
  eAnchor<%= image.id %>.setAttribute("title", "#{project.title}");
  eAnchor<%= image.id %>.setAttribute("rel", "shadowbox");
  
  // create the image
  eIMG<%= image.id %> = document.createElement("img");
  eIMG<%= image.id %>.setAttribute("src", "#{image.file.url(:medium)}");
  eIMG<%= image.id %>.setAttribute("title", "Click to enlarge.");
  
  // append image to anchor
  eAnchor<%= image.id %>.appendChild(eIMG<%= image.id %>);  
</script>

<li id="image_<%= image.id %>" class="project thumb">
  <%= link_to image_tag image.file.url(:thumb), :onClick => "so_clearInnerHTML(document.getElementById('main_image_wrapper')); document.getElementById('main_image_wrapper').appendChild(eAnchor#{image.id}); Shadowbox.clearCache(); Shadowbox.setup();" %>
</li>