dynamically inserting jbrowse into a div

<a href="http://jbrowse.alliancegenome.org/jbrowse/index.html?data=data%2FHomo%20sapiens&tracks=All%20Genes&highlight=&lookupSymbol=CFTR&loc=7%3A117366917..117782061">Human</a>
<div id="jbrowse_human" class="jbrowse-view-iframe" 
     style="width:100%;height:400px;background-color:#fff;resize: vertical;overflow: auto;" 
     onrsize="resizeJBrowse();">Hmm, jbrowse failed to load :-(</div>
<script type="text/javascript">
  //this is the trick--setting the innerHTML to an object that consists of what will be a jbrowse div once jbrowse runs
  document.getElementById("jbrowse_human").innerHTML='<object id="innerJBrowse" type="text/html" style="width:100%;height:400px;overflow: auto;" data="http://jbrowse.alliancegenome.org/jbrowse/index.html?data=data%2FHomo%20sapiens&tracks=All%20Genes&highlight=&lookupSymbol=CFTR&loc=7%3A117366917..117782061&nav=0&tracklist=0&overview=0" ></object>';
</script>

<a href="http://jbrowse.alliancegenome.org/jbrowse/index.html?data=data%2FMus%20musculus&tracks=All%20Genes&highlight=&lookupSymbol=Cftr&loc=6%3A18079564..18414143">Mouse</a>
<div id="jbrowse_mouse" class="jbrowse-view-iframe" 
     style="width:100%;height:400px;background-color:#fff;resize: vertical;overflow: auto;" 
     onrsize="resizeJBrowse();">Hmm, jbrowse failed to load :-(</div>
<script type="text/javascript">
  document.getElementById("jbrowse_mouse").innerHTML='<object id="innerJBrowse" type="text/html" style="width:100%;height:400px;overflow: auto;" data="http://jbrowse.alliancegenome.org/jbrowse/index.html?data=data%2FMus%20musculus&tracks=All%20Genes&highlight=&lookupSymbol=Cftr&loc=6%3A18079564..18414143&nav=0&tracklist=0&overview=0" ></object>';
</script>