最后添加列表内容？

Actually my code is---

function addElement(url,imagePath){
alert(url);

alert(imagePath);

var container = document.getElementById('sncs');


var new_element = document.createElement('li');

new_element.innerHTML ="<a href='#'><img src='"+imagePath+"' alt='' title='' width='466' height='165' onClick=\"javascript:addWidget('"+url+"')\"></a>";  
new_element.className="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal";
container.insertBefore(new_element, container.firstChild);
}
function addWidget(url) {
   alert(url);
   // var url='http://www.boxyourtvtrial.com/songs/public/';
   var  main= document.getElementById('mainwidget'); 
   main.innerHTML = "<iframe src='"+url+"' align='left' height='1060px' width='576px' scrolling='no'  frameborder='0' id='lodex'></iframe>";
} 

but when we add the image itsnot going at the but is going in front... So please provid the solution

Try using

container.appendChild( new_element );

instead of

container.insertBefore(new_element, container.firstChild)