href for a list with a background image in JQuery

I am displaying images inside a div This is the html rendered by jquery

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

I want a href tag for each image to link to google.com like this

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

How can I code it in JQuery? I tried

var arrowLink = $('<a>',{
                            className: 'link',
                            href: 'www.google.com',

        }).appendTo(li);

but it is

but it is rendered like

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

Pl开发者_Python百科s.help

Wrapping a <li> in a <a> is not valid xhtml, which is why jQuery is putting the <a> inside the <li> (which is valid).

Style li > a to match the width + height of the <li> and you should get the desired result.

you are using a background image thus there is nothing to click on.

Edit: @adam's edited answer to match the height and width will fix that

You should style li > a with display:block so it assumes the height and width of its parent element.