href for a list with a background image in JQuery
<p>I am displaying images inside a div 
This is the html rendered by jquery</p>

<pre><code>&lt;div id="flickrSlider" class="flickrSliderHolder" style="width: 500px; height: 345px;"&gt;
&lt;span class="caption"&gt;&lt;/span&gt;
&lt;ul style="width: 1000px; height: 320px; left: 0px;"&gt;
    &lt;li style="background-image: url('example.jpg'); width: 500px;"&gt;&lt;/li&gt;
    &lt;li style="background-image: url('example2.jpg'); width: 500px;"&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p></p>

<p>I want a href tag for each image to link to google.com like this</p>

<pre><code>&lt;div id="flickrSlider" class="flickrSliderHolder" style="width: 500px; height: 345px;"&gt;
&lt;span class="caption"&gt;&lt;/span&gt;
&lt;ul style="width: 1000px; height: 320px; left: 0px;"&gt;
    &lt;a href="www.google.com"&gt; &lt;li style="background-image: url('example.jpg'); width: 500px;"&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li style="background-image: url('example2.jpg'); width: 500px;"&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p></p>

<p>How can I code it in JQuery? 
I tried</p>

<pre><code>var arrowLink = $('&lt;a&gt;',{
                            className: 'link',
                            href: 'www.google.com',

        }).appendTo(li);
</code></pre>

<p>but it is </p>

<p>but it is rendered like</p>

<pre><code>&lt;div id="flickrSlider" class="flickrSliderHolder" style="width: 500px; height: 345px;"&gt;
&lt;span class="caption"&gt;&lt;/span&gt;
&lt;ul style="width: 1000px; height: 320px; left: 0px;"&gt;
    &lt;li style="background-image: url('example.jpg'); width: 500px;"&gt;&lt;a href="www.google.com"&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li style="background-image: url('example2.jpg'); width: 500px;"&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p></p>

<p>Pls.help</p>
