Adding link with existing href.

Question

Hello gurus,

Im trying to create link inside my list tag that will have href inherited from link that already exists in this list tag. Don't know how much sense does it makes, but i have this:

<ul>
    <li><a href="page1.html">Support</a></li>
    <li><a href="page2.html">Products</a></li>
    <li><a href="page3.html">Management</a></li>
    <li><a href="page4.html">Others</a></li>
</ul>

and I need soothing like this:

<ul>
    <li>
        <a href="page1.html">Support</a>
        <div class="slideLink"><a href="page1.html">Click Here</a></div>
    </li>
    <li>
        <a href="page2.html">Products</a>
        <div class="slideLink"><a href="page2.html">Click Here</a></div>
    </li>
    <li>
        <a href="page3.html">Management</a>
        <div class="slideLink"><a href="page3.html">Click Here</a></div>
    </li>
    <li>
        <a href="page4.html">Others</a>
        <div class="slideLink"><a href="page4.html">Click Here</a></div>
    </li>
</ul>

So far I have managed to add div with class and link within it with "click here" text, but i don't have a clue how to grab link href and add it to my new link.

$('ul li a').each(function(){
    $(this).after("<div class='slideLink'><a href=" + Link + ">Read more</div>");
  });

Thank you for your help in advance.

Best Regards

Dom

Answer 1

$('ul li a').each(function(){
  var link = $(this).attr('href');
  $(this).after("<div class='slideLink'><a href=" + link + ">Read more</div>");
});

Answer 2

$('ul li a').each(function(){
    var $div = $("<div class='slideLink'></div>");
    var $link = $("<a></a>").attr("href", $(this).attr("href"))
                            .text("Click Here");
    $div.append($link);
    $(this).after($div);
});