如何使用 javascript 创建链接？

Question

提问by Xavier

I have a string for a title and a string for a link. I'm not sure how to put the two together to create a link on a page using Javascript. Any help is appreciated.

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

EDIT1: Adding more detail to the question. The reason I'm trying to figure this out is because I have an RSS feed and have a list of titles ands URLs. I would like to link the titles to the URL to make the page useful.

EDIT1：为问题添加更多细节。我试图弄清楚这一点的原因是因为我有一个 RSS 提要，并且有一个标题和 URL 列表。我想将标题链接到 URL 以使页面有用。

EDIT2: I am using jQuery but am completely new to it and wasn't aware it could help in this situation.

EDIT2：我正在使用 jQuery，但对它完全陌生，并且不知道它在这种情况下会有所帮助。

Answer 1

回答by Jared Farrish

<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>

Answer 2

回答by gion_13

With JavaScript

使用 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>';

or, as suggested by @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>

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>

With JQuery

使用 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);

$('<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);

In all the above examples you can append the anchor to any element, not just to the 'body', and desiredLinkis a variable that holds the address that your anchor element points to, and desiredTextis a variable that holds the text that will be displayed in the anchor element.

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

Answer 3

回答by Naveed

Create links using JavaScript:

使用 JavaScript 创建链接：

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

OR

或者

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

OR

或者

<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>

Answer 4

回答by Roopinder

There are a couple of ways:

有几种方法：

If you want to use raw Javascript (without a helper like JQuery), then you could do something like:

如果您想使用原始 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);

The other method is to write the link directly into the document:

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

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

Answer 5

回答by Nadu

    <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>

The 'Anchor Object' has its own*(inherited)* properties for setting the link, its text. So just use them. .setAttributeis more general but you normally don't need it. a.title ="Blah"will do the same and is more clear! Well a situation that'll demand .setAttributeis this: var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")
Leave the protocol open. Instead of http://example.com/path consider to just use //example.com/path. Check if example.com can be accessed by http:as well as https:but 95 % of sites will work on both.
OffTopic:That's not really relevant about creating links in JS but maybe good to know:Well sometimes like in the chromes dev-console you can use $("body")instead of document.querySelector("body")A _$ = document.querySelectorwill 'honor' your efforts with an Illegal invocationerror the first time you use it. That's because the assignment just 'grabs' .querySelector(a ref to the classmethod). With .bind(...you'll also involve the context (here it's document) and you get an objectmethod that'll work as you might expect it.

“锚点对象”有自己的*（继承）* 属性，用于设置链接及其文本。所以只需使用它们。.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），你会得到一个对象认为会工作，你可能会期望它的方法。

Answer 6

回答by jmort253

Dynamically create a hyperlink with raw JavaScript:

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

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

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

Answer 7

回答by zerodunwash

You paste this inside :

你把它粘贴在里面：

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

如何使用 javascript 创建链接？

提问by Xavier

回答by Jared Farrish

回答by gion_13

With JavaScript

使用 JavaScript

With JQuery

使用 JQuery

回答by Naveed

回答by Roopinder

回答by Nadu

回答by jmort253

回答by zerodunwash

相关推荐

最近更新

标签

如何使用 javascript 创建链接？

提问by Xavier

回答by Jared Farrish

回答by gion_13

With JavaScript

使用 JavaScript

With JQuery

使用 JQuery

回答by Naveed

回答by Roopinder

回答by Nadu

回答by jmort253

回答by zerodunwash

相关推荐

JavaScript window.location 没有在请求头中设置引用

Javascript React Native 中的动画背景色

Javascript 在哪里可以找到 Facebook cookie？

Javascript 以有效的方式检查多个变量是否不为空、未定义或为空

相关推荐

最近更新

标签