当您点击段落中的链接时，它们会被克隆并且附加到linkContainer。
我得到了所有工作，除了我希望附加到linkContainer的克隆链接显示实际的href文本（例如，www.google.com）作为可点击标记。
我希望linkContainer中显示的链接文本与href本身相同。例如，如果您点击段落中的Google链接，则会克隆＆amp;将www.google.com附加到linkContainer（标记内）作为链接文本（例如＆lt; a href =“www.google.com”＆gt; www.google.com＆lt; / a＆gt;）
我只能找到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
});
}
非常感谢这方面的一些指示，它让我疯了！干杯! ： - ）
答案 0 :(得分：4)
答案 1 :(得分：1)
OP要求<a> nchors默认运行（即跳转到href值指定的位置）。最初将eventListener添加到文档中，因此我们需要做的就是将event.currentTarget缩小到DOM上的较低值。我将<p> aragraph包裹在<section>中，然后将eventListener添加到其中。现在，如果点击section#content之外的任何内容（例如ul.linkContainer）将正常运行。
OP希望每个单独的锚点都会发生一次点击和复制事件。通常我会使用removeEventListener()，但由于eventListener的配置方式，它会在第一次单击锚点上禁止锚点的其余初始行为。
相反，尝试在已经单击的每个锚点上分配一个标志。如果再次单击，则应该存在禁止再次复制锚点的情况。请参阅代码段以获取最新更新。
OP要求该列表也有一个锚，添加：
listItem.innerHTML = '<a href="'+href+'">'+href+'<\/a>';
<小时/> - 获取
href 的值
var href = link.getAttributeNode('href').value;
此值为字符串，因此只需使用cloneNode或innerHTML
textContent。
listItem.innerHTML = href;
我更改了eventListener在文档上的使用方式，而不是单个锚点。拥有一个eventListener比拥有2个或更多更好。它被挂钩到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>