将链接克隆并附加到容器，但附加整个URL —而不是链接文本

Question

This should be easy but I can't find any topics about this, I think it's because I don't know how to phrase it correctly.

Problem:

When you hover over a link it gets cloned & appended to #container — however I want the link in #container to be the actual URL in its entirety, so if a link text says: "here is an article" , I want the one that gets appended to #container to show: http:/www.myarticle.com/name-of-article .

I've tried to make my question very visually clear on CodePen, would someone check it out and advice me? :-)

http://codepen.io/StrengthandFreedom/pen/YqNrYO

The jQuery I use:

$('a').one('mouseover', function(){

 $(this).clone().appendTo('#container'); 
});

Either JavaScript or jQuery solutions are fine, I use both.

Answer 1

You need to update the link text to the value of the href attribute.

$('a').one('mouseover', function(){
 var href = $(this).attr('href'); 
 $(this).clone().text(href).appendTo('#container');
});

http://codepen.io/anon/pen/eZgeNe

Answer 2

You may use this:

$('a').one('mouseover', function(){
     $('#container').append($(this).attr('href')); 
});

You need to catch the attribute of the link, which is done by using attr('attribute-handle')