Jquery: Move the focus of an <a> tag from a single word to the entire text <div>

Question

Would appreciate any pointers regarding which function to use for this:

Say I have something like this:

<div class="myTweet">Check out this awesome link <a href="http://bit.ly/uglylookinglink&gt;http://bit.ly/uglylookinglink&lt;/a&gt;&lt;/div&gt;

Which reads:

Check out my awesome link http://bit.ly/uglylookinglink

All I want to do is move the tag to the front of the containing div so that the whole sentence becomes the link, and remove the horrible http://bitl.y link that comes with it.

So it would look like this afterwards:

<div class="myTweet"><a href="http://bit.ly/uglylookinglink&gt;Check out this awesome link </a></div>

Which will then read:

Check out my awesome link

It's probably really easy but i cant find the right way to go.

Thanks, Marc

Answer 1

You can use .wrapInner() and the <a> itself to do so, like this:

​$(".myTweet a")​​​​​​​​​​​​​.each(function() {
  $(this).empty().parent().wrapInner(this);
});​

You can give it a try here, this takes the link, removes it original contents via .empty(), then wraps the <div>'s text using the anchor element itself.