如何使用JavaScript创建链接？

127

我有一个标题字符串和一个链接字符串。我不确定如何将两者放在一起以使用Javascript在页面上创建链接。任何帮助表示赞赏。

编辑1：向该问题添加更多详细信息。我要弄清楚这一点的原因是因为我有一个RSS提要，并且有标题和URL的列表。我想将标题链接到URL以使页面有用。

EDIT2：我使用的是jQuery，但它是全新的，并且不知道它可以在这种情况下提供帮助。

— 泽维尔
source

您是否正在使用jQuery或其他内容（Mootools，Dojo，Atlas等）加载RSS feed？如果您试图基于在页面加载时获取的第三方RSS列表动态创建定位标记，则建议使用jQuery库或其他元素来添加元素。在这种情况下，详细信息对于了解需要执行的操作很重要。但是，DOM方法是一个有用的说明。

— Jared Farrish

试试这个链接，我认为这可能是有益的

— Yitzhak Weinberg

227

<html>
  <head></head>
  <body>
    <script>
      var a = document.createElement('a');
      var linkText = document.createTextNode("my title text");
      a.appendChild(linkText);
      a.title = "my title text";
      a.href = "http://example.com";
      document.body.appendChild(a);
    </script>
  </body>
</html>

— 贾里德·法瑞什（Jared Farrish）
source

1

这是使用DOM方法向页面添加锚标记的非常普通的示例。例如，appendChild方法可以是列表元素，TD或页面内的其他元素。参见：quirksmode.org

— Jared Farrish

5

@Nadu-请停止编辑我的答案。如果您想说一件事，请添加自己的一个；如果没有足够的“差异”来保证它，就没有足够的差异来保证进行编辑。

— 贾里德·法瑞希

plnkr.co/edit/mV7nOBIHa6hMNaVIPG75?p=preview我已经创建了一个plunker示例。

— 哈罗德·卡斯蒂略

61

使用JavaScript

var a = document.createElement('a');
a.setAttribute('href',desiredLink);
a.innerHTML = desiredText;
// apend the anchor to the body
// of course you can append it almost to any other dom element
document.getElementsByTagName('body')[0].appendChild(a);

document.getElementsByTagName('body')[0].innerHTML += '<a href="'+desiredLink+'">'+desiredText+'</a>';

或者，按照@travis的建议：

document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);

<script type="text/javascript">
//note that this case can be used only inside the "body" element
document.write('<a href="'+desiredLink+'">'+desiredText+'</a>');
</script>

使用JQuery

$('<a href="'+desiredLink+'">'+desiredText+'</a>').appendTo($('body'));

$('body').append($('<a href="'+desiredLink+'">'+desiredText+'</a>'));

var a = $('<a />');
a.attr('href',desiredLink);
a.text(desiredText);
$('body').append(a);

在以上所有示例中，您都可以将锚点附加到任何元素上，而不仅仅是“ body”，并且desiredLink是一个变量，该变量保存您的锚点元素指向的地址，并且desiredText是一个变量，用于保存将在其中显示的文本。锚元素。

— gion_13
source

3

我认为您唯一遗漏的是：document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);

— travis

1

为了避免使用XSS，在构建HTML 时应避免字符串串联（+）.innerHTML。使用jQuery，.attr("href", desiredLink)和.text(desiredText)你想要的这里。

— Wes Turner

15

使用JavaScript创建链接：

<script language="javascript">
<!--
document.write("<a href=\"www.example.com\">");
document.write("Your Title");
document.write("</a>");
//-->
</script>

要么

<script type="text/javascript">
document.write('Your Title'.link('http://www.example.com'));
</script>

要么

<script type="text/javascript">
newlink = document.createElement('a');
newlink.innerHTML = 'Google';
newlink.setAttribute('title', 'Google');
newlink.setAttribute('href', 'http://google.com');
document.body.appendChild(newlink);
</script>

— 幼稚的
source

12

有两种方法：

如果要使用原始Javascript（不使用JQuery之类的帮助器），则可以执行以下操作：

var link = "http://google.com";
var element = document.createElement("a");
element.setAttribute("href", link);
element.innerHTML = "your text";

// and append it to where you'd like it to go:
document.body.appendChild(element);

另一种方法是将链接直接写入文档中：

document.write("<a href='" + link + "'>" + text + "</a>");

— 罗普林德
source

我绝对更喜欢第一种选择。+1，但是混合使用JS和HTML混合了内容和行为，应该分开。过度使用，可能导致维护噩梦。

— jmort253 2011年

我也倾向于使用第一个选项，但是也许使用JQuery可以达到相同的效果（以提高可读性和易于维护性）。

— Roopinder

1

你或许应该避免使用document.write stackoverflow.com/questions/4520440/...

— TryHarder

4

    <script>
      _$ = document.querySelector  .bind(document) ;

        var AppendLinkHere = _$("body") // <- put in here some CSS selector that'll be more to your needs
        var a   =  document.createElement( 'a' )
        a.text  = "Download example" 
        a.href  = "//bit\.do/DeezerDL"

        AppendLinkHere.appendChild( a )
        

     // a.title = 'Well well ... 
        a.setAttribute( 'title', 
                         'Well well that\'s a link'
                      );
    </script>

展开摘要

“锚对象”具有自己的*（继承）*属性，用于设置链接及其文本。因此，只需使用它们。.setAttribute更通用，但通常不需要。a.title ="Blah"会做同样的事情，更清楚！那么，需要.setAttribute的情况是这样的：var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")
将协议保持打开状态。而不是HTTP： //example.com/path考虑只使用//example.com/path。检查example.com是否可以通过http：和https：访问，但是95％的网站都可以在这两个网站上使用。
OffTopic：关于在JS中创建链接并不是很重要，但是可能要知道： 有时候，就像在chromes dev-console中，您可以使用$("body")而不是document.querySelector("body")A_$ = document.querySelector会在第一次使用它时以非法调用错误来“赞美”您的努力。这是因为分配只是“抓取” .querySelector（对类方法的引用）。与此同时，.bind(...您还将涉及到上下文（这里是document），并且您将获得一个可以按预期工作的对象方法。

— 那都
source

3

使用原始JavaScript动态创建超链接：

   var anchorElem = document.createElement('a');
   anchorElem.setAttribute("href", yourLink);
   anchorElem.innerHTML = yourLinkText;

   document.body.appendChild(anchorElem); // append your new link to the body

— 第253节
source

使用`anchorElem.text = yourLinkText; 而不是innerHTML会更加清晰。是的，请考虑如果yourLinkText可能是“ <-太酷了！”会发生什么。

— 纳杜

-4

您将其粘贴到内部：

<A HREF = "index.html">Click here</A>

— 零顿
source

OP明确要求使用JavaScript（不是HTML）创建链接！

— hatef 2016年