title: Cloning list items Jquery
body: <p>I have a list of images. When the program starts I want to clone the list and prepend it.
  This is my code so far:</p>
  
  <pre><code>var children = $("#imageList").children().clone();
  
  $("#imageList").prepend(children);
  </code></pre>
  
  <p>Why will this not clone the children in the list? When I test the program I only have the original list.</p>
  
  <p><strong>Update:</strong> Here is the image list:</p>
  
  <pre><code>&lt;ul id = "imageList"&gt; &lt;!-- List of scrolling images --&gt;
                  &lt;li id = "image1" class = "ImagesScroller"&gt;
                      &lt;div&gt;
                          &lt;a href "www.url.com"&gt;Somethimes Click This&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;img src = "Image1" height = "200" width = "500" alt = "/" /&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li id = "image2" class = "ImagesScroller"&gt;
                      &lt;div&gt;
                          &lt;a href = "www.url.com"&gt;Always Click This&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;img src = "Image2" height = "200" width = "500" alt = "/" /&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li id = "image3" class = "ImagesScroller"&gt; 
                      &lt;div&gt;
                          &lt;a href = "www.url.com"&gt;Don't Click This&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;img src = "Image3" height = "200" width = "500" alt = "/" /&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li id = "image4" class = "ImagesScroller"&gt;
                      &lt;div&gt;
                          &lt;a href = "www.url.com"&gt;Click This (On Tuesdays)&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;img src = "Image4" height = "200" width = "500" alt = "/" /&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>
  
  <p>It isn't just a list of images. Each image has a link on top of it that goes with that image. The images will animate (using .animate()) to cycle through. I need to append and prepend images so that the "loop" that I am making will be endless.</p>