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

【问题标题】：Clone & Append Link to Container, but Append the entire URL — Not the Link Text克隆并附加链接到容器，但附加整个 URL——不是链接文本
【发布时间】：2016-03-17 15:30:06
【问题描述】：

这应该很容易，但我找不到任何关于此的主题，我想这是因为我不知道如何正确表达它。

问题：

当您将鼠标悬停在链接上时，它会被克隆并附加到#container — 但是我希望 #container 中的链接是完整的实际 URL，所以如果链接文本显示："here is an article"，我想要那个附加到#container 以显示：http:/www.myarticle.com/name-of-article。

我已经尝试在 CodePen 上让我的问题在视觉上非常清晰，有人会检查一下并给我建议吗？ :-)

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

我使用的 jQuery：

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

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

JavaScript 或 jQuery 解决方案都可以，我都使用。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您需要将链接文本更新为 href 属性的值。

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

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

【讨论】：

太完美了！我尝试使用 .attr 但我忘了在 appendTo doh 之前使用文本！谢谢！ :-)

【解决方案2】：

你可以使用这个：

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

需要捕获链接的属性，使用attr('attribute-handle')完成

【讨论】：