wrap on the contents of the selected element

wrap on the contents of the selected element

I know how to write this:
$("li.subnav").wrap("<a href='#' id='video'></a>");


But it renders as
<a id="video" href="#">
<li class="subnav">Blogs</li>
</a>


What I need is:
<li class="subnav"><a id="video" href="#">Blogs</a></li>


So how can I wrap the contents of li.subnav instead of the li elements themselves?

I would also love to know how I could use the contents for example "Blogs" to set the id of the link.
<a id="blogs"
for the blogs link etc.

I am fairly new to jquery and I would appreciate any help someone can give me.