Question

在html页面的某些部分，我有一个包含以下代码的链接：

<a id="idname" class="classname" href="www.MySite.com/image-name.jpg">link-text</a>

我想使用javascript 在同一页面的另一部分自动显示相同的链接。

要在我的页面中插入什么脚本？

提前感谢您对此事的任何帮助。

帕特里克

Answer 1

试试这个：

myVar = document.getElementById("idname");
varLink = (myVar.attributes.href);

Answer 2

<script>
    window.onload = function() {
        // get data from link we want to copy
        var aHref = document.getElementById('idname').href;
        var aText = document.getElementById('idname').innerHTML;

        // create new link element with data above
        var a = document.createElement('a');
        a.innerHTML = aText;
        a.href = aHref;
        // paste our link to needed place
        var placeToCopy = document.getElementById('anotherplace');
        placeToCopy.appendChild(a);
    }
</script>

如果您只想复制您指向其他地方的链接，请使用上面的代码。 JSFiddle

Answer 3

作为儿子你知道目标身份：

<div id="targetID">New Link: </div>
<div id="targetID2">New Link 2: </div>

如果您使用的是jQuery，可以这样做：

var link = $("#idname").clone();
link.attr("id",link.attr("id") + (Math.random() * 10));
$("#targetID").append(link);

如果不是：

var link = document.getElementById("idname");
var newLink = document.createElement("a");
newLink.href = link.href;
newLink.className = link.className;
newLink.innerHTML = link.innerHTML;
newLink.id = link.id + (Math.random() * 10);
document.getElementById("targetID2").appendChild(newLink);

请参阅此Example

Answer 4

首先，我想指出，如果你只是复制会引发错误的元素，因为复制的元素将具有与第一个相同的id，所以如果你要创建元素的副本，你就不要＃ 39; t必须给它相同的id。

试用此代码：

function copyLink(newDestination){
    var dest=document.getElementById(newDestination);
    var newLink=document.createElement("a");
    var myLink=document.getElementsByClassName("classname")[0];
    newLink.href=myLink.href;
    newLink.className = myLink.className;
    newLink.innerHTML = myLink.innerHTML;
    newDestination.appendChild(newLink);
}

newDestination参数是新链接的容器元素。

例如，如果新的Container元素具有id＆＃34; div1＆＃34;：

window.onload = function() {
    copyLink(div1);
}

<强> Here's a DEMO

Answer 5

非常感谢大家的快速回复。

最后，我能够使用Jquery 。所以，我尝试了 Andrew Lancaster 给出的解决方案。

在我的页面中，我按以下顺序添加了以下代码：

1 -

<span id="span1">
    <a class="classname" href="www.MySite.com/image-name.jpg">link-text</a>
</span>
<p>
    <span id="span2"></span>
</p>

并在页面下方：

2 -

<script type="text/javascript">
    var span1val = $('#span1').html();
    $('#span2').html(span1val);
</script>

因此，正确显示两个预期相同的链接。

但是，不幸的是，我在最初的请求中忘了说些什么：

原始链接位于我页面的底部
我希望在页面的上半部分有重复的链接

那么，您知道如何在原始链接上方显示重复的链接吗？

顺便说一句，为了解决David提到的无效标记，我刚从原始链接中删除了id =“idname”（我可以忽略或用其他方法替换）。

提前再次感谢您的任何新回复。

帕特里克

Answer 6

使用Jquery，您可以将链接包含在带有ID的范围中，然后获取该ID的值并将其推送到另一个span id。

HTML

<span id="span1">
    <a id="idname" class="classname" href="www.MySite.com/image-name.jpg">link-text</a>
</span>
<p>
    <span id="span2"></span>
</p>

的jQuery

var span1val = $('#span1').html();
$('#span2').html(span1val);

示例可以在这里找到。

http://jsfiddle.net/3en2Lgmu/5/

用javascript显示html链接

6 个答案: