I have a div which contains a "li" tag.

I have few images which I want to add the "li" tag programmatically.

Below is the code I have used so far, but not sure how to add the image to li tags dynamically.

1. <div id="div1">
       <div id="div2">
           <ul class="clsUL">
               <li></li>
           </ul>
       </div>
   </div>
   
   
   
   
   
   

2. 
   pictureArray = new Array();   
       var pictureCount = 0;    
       var enumerator = this.pictures.getEnumerator();    
       while(enumerator.moveNext())    
       {      
           var currentItem = enumerator.get_current();
           var filename = currentItem.get_item('FileLeafRef');  
           var dir = currentItem.get_item('FileDirRef');     
           filename = dir + '/' + filename; 
           pictureArray[pictureCount++] = filename;
       }
   
   
   
   
   
   
   
   
   
   
   

3.     var newHtml = '';
       var itgdispval = "block";     
       //iterate through the result and create HTML code for each picture 
       for(var i = 0; i < this.pictureArray.length; i++)    
       {  
           var li = document.createElement("li");
           li.innerHTML="<img src='"+this.pictureArray[i]+"' />";
           var ul = document.getElementById("div2").getElementsByTagName("ul")[0];
           newHtml += ul.appendChild(li);      
             
       }    
       //store the number of images   
       itgImgRotCount = i;         
       //start the iterator 
       itgImgRotIter++;     
       //assign the HTML to the rotator container 
       $('#div2').html(newHtml);   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

I am getting the output as 

[object HTMLLIElement][object HTMLLIElement][object HTMLLIElement][object HTMLLIElement][object HTMLLIElement]