javascript - filling ul li with images -

i have problem ul li fill

<ul>      <li></li>      <li></li>      <li></li>      <li></li> </ul> 

i need put in li javascript

but please without example :

$("ul").html("<li><img src='something' /></li>"); 

because need ul li before javascript load.

i want after javascript :

<ul>     <li><img src='something' /></li>     <li><img src='something' /></li>     <li><img src='something' /></li>     <li><img src='something' /></li> </ul> 

my question : how fill ul li images.

and javascript work loop. because maybe have variant :

<ul>      <li></li>      <li></li>      <li></li>      <li></li> </ul> 

4 li , 2 image, , :

<ul>     <li><img src='something' /></li>     <li><img src='something' /></li>     <li></li>     <li></li> </ul> 

i hope explain this. anyway

my php code :

<?php session_start(); include_once('connect.php');  $path = "../uploads/"; $i = -1; foreach($_files['files']['name'] $key => $name) {     $i++;     $image_info = getimagesize($_files['files']['tmp_name'][$key]);     $image_width = $image_info[0];     $image_height = $image_info[1];      if($image_width > $image_height) {         $height = $image_height;         $width = $height;     } else if($image_width < $image_height) {         $width = $image_width;         $height = $width;     } else {         $width = $image_width;         $height = $image_height;     }      $canvas = imagecreatetruecolor($width, $height);     $current_image = imagecreatefromjpeg($_files['files']['tmp_name'][$key]);      imagecopy($canvas, $current_image, 0, 0, ($image_width/2)-($width/2), ($image_height/2)-($height/2), $width, $height);     imagejpeg($canvas, $path.'cropped_'.$name, 100);       echo      "         <script type='text/javascript'>             var _img = document.createelement('img');             _img.src = 'uploads/".$name."';              $('.image-upload ul li:nth(".$i.")').append(_img);         </script>     "; }  ?> 

before : http://i.imgur.com/jnia9u9.png

after http://i.stack.imgur.com/ve1cc.png

var _ul=document.getelementbytagname('ul'); var _list=_ul.getelementsbytagname('li');  (var i=0;i<=_list.length;i++)   {     var _img=document.createelement('img');     _img.src="something";     _img.id="foo"+i;     _list[i].appendchild(_img);    }