当你点击段落中的链接时，它们会被克隆&附加到linkContainer。
除了我希望附加到linkContainer的克隆链接将实际的href文本(例如，www.google.com)显示为可点击标记之外，我已经完成了所有工作。
我希望linkContainer中显示的链接文本与href本身相同。例如，如果你点击段落中的谷歌链接，它会克隆&将www.google.com附加到链接容器(位于标签内)作为链接文本(如<a href="www.google.com">www.google.com</a>)
我只能为jQuery找到答案。我尝试过使用setAttribute"href"，但我不确定这是否是我所需要的？
https://jsfiddle.net/dnLd1kLy/2/
var linkContainer = document.querySelector('.linkContainer');
var links = document.querySelectorAll('a');
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', function(event) {
event.preventDefault()
var listItem = document.createElement('li'); // Create a <li> node
var href = this.cloneNode(true); // Should clone the href www.
listItem.appendChild(href); // Append the href to <li></li>
linkContainer.appendChild(listItem); // append li with the href to container
});
}
非常感谢你的指点，这让我抓狂！干杯！：-)
添加
href.text = this.href
在href-var设置之后
https://jsfiddle.net/dnLd1kLy/3/
更新2
OP请求<a>nchor默认起作用(即跳转到由href值指定的位置)。eventListener最初是添加到文档中的，所以我们所需要做的就是将event.currentTarget缩小到DOM的较低部分。我将<p>段封装在<section>中，然后将eventListener添加到其中。现在，如果单击了section#content之外的任何内容(例如ul.linkContainer)，它将正常工作。
OP还希望每个锚点都发生一次点击和复制事件。通常我会使用removeEventListener()，但由于eventListener的配置方式，它会抑制锚点在第一次单击锚点时的其余初始行为。
相反，请尝试在已单击的每个锚点上分配一个标志。如果再次单击，应该有一个条件禁止再次复制锚点。有关最新更新，请参阅代码段。
更新1
OP要求该列表也有一个锚点，并添加：
listItem.innerHTML = '<a href="'+href+'">'+href+'</a>';
-获取
href的值
var href = link.getAttributeNode('href').value;
这个值是一个字符串，所以不用
cloneNode，只需使用innerHTML或textContentlistItem.innerHTML = href;
我更改了eventListener在文档中的使用方式，而不是单个锚点。拥有一个eventListener比拥有两个或多个要好。它被连接到event.target中，所以现在您甚至不需要收集文档上的每个锚点。您只需要在触发click事件时执行您的函数。
摘录
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.linkContainer {
width: 300px;
height: 200px;
background: #ccc;
}
</style>
</head>
<body>
<section id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi odio molestiae laboriosam ex enim molestias suscipit, delectus amet impedit, aut ea labore alias deleniti, dignissimos culpa! Blanditiis optio accusamus accusantium!Lorem ipsum dolor
sit amet, <a href="www.google.com">Google</a> ipisicing elit. Recusandae quisquam obcaecati, perspiciatis velit, <a href="www.twitter.com">Twitter</a> illo facere dolor officia, ab omnis commodi accusamus deleniti ea, maiores unde quae in accusantium
eum possimus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, facere dignissimos corporis laboriosam sequi nobis facilis. Quam, illum, deleniti. Excepturi odit suscipit ratione distinctio. Commodi, animi dolor dolore <a href="www.youtube.com">Youtube</a> ius.Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Architecto deleniti praesentium libero et corporis nam eveniet odit sed. Ducimus perferendis esse atque libero nam amet sed? Consequatur aspernatur consectetur, quos!</p>
</section>
<ul class="linkBox">
</ul>
<script>
var linkContainer = document.querySelector('.linkBox');
var txt = document.getElementById('content');
txt.addEventListener('click', function(event) {
if (event.target != event.currentTarget) {
var link = event.target;
// So the next time around, if the link was already clicked, the data-fired attribute would meet the conditional's requirement. That in turn will kick you out of the function before the even.preventDefault() so now it's in every aspect a normal anchor again.
if (link.dataset.fired) { return };
event.preventDefault();
// Set a data-* attribute called data-fired
link.dataset.fired = true;
event.stopPropagation();
}
var listItem = document.createElement("li");
// Create a <li> node
var href = link.getAttributeNode('href').value;
// Should be the actual href www.
console.log(href);
listItem.innerHTML = '<a href="' + href + '">' + href + '</a>';
// Append the href to <li></li>
linkContainer.appendChild(listItem);
// append li with the href to container
}, false);
</script>
</body>
</html>参考
https://stackoverflow.com/a/36312449/2813224