如何使用javascript创建链接?

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.

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

7 个解决方案

#1

172

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

#2

With 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);

var = document.createElement(' a ');

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

or, as suggested by @travis :

或者，如@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>

< script type = " text / javascript " >

With JQuery

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

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

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

美元(的身体)。追加($(' < a href = " + desiredLink +”>“+ desiredText + ' < / > '));

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

var a = $('');

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

在上面的所有示例中，您可以将锚添加到任何元素，而不仅仅是对“body”，desiredLink是一个变量，它包含锚元素指向的地址，desiredText是一个变量，它包含将显示在锚元素中的文本。

#3

Create links using JavaScript:

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

#4

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>");

#5

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

#6

    <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. .setAttribute is 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 .setAttribute is this: var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")

“锚对象”有它自己的*(继承的)*属性来设置链接，它的文本。使用它们。setattribute更一般，但通常不需要。一个。title ="Blah"也会这样，而且更清楚!一个需要。setattribute的情况是:var myAttrib = "title";一个。setAttribute(myAttrib,“废话”)
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.

离开协议开放。而不是http://example.com/path考虑使用// /example.com/path。检查example.com是否可以通过http:和https:访问，但95%的站点同时使用这两种方式。
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 invocation error the first time you use it. That's because the assignment just 'grabs' .querySelector (a ref to the class method). With .bind(... you'll also involve the context (here it's document) and you get an object method that'll work as you might expect it.

OffTopic:这与在JS中创建链接并没有多大关系，但也许很好理解:有时，就像在chromes dev-console中，可以使用$(“body”)而不是document. queryselector(“body”)A _$ = document。queryselector将在第一次使用时使用非法调用错误，以“尊重”您的努力。这是因为赋值只是“抓取”. queryselector(类方法的ref)。与.bind(…您还将涉及上下文(这里是文档)，您将获得一个对象方法，该方法将按照您的期望工作。

#7

-4

You paste this inside :

你把这个贴在里面:

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

< A HREF = "指数。html " >点击这里< / >

#1

172

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

#2

With 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);

var = document.createElement(' a ');

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

or, as suggested by @travis :

或者，如@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>

< script type = " text / javascript " >

With JQuery

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

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

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

美元(的身体)。追加($(' < a href = " + desiredLink +”>“+ desiredText + ' < / > '));

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

var a = $('');

#3

Create links using JavaScript:

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

#4

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>");

#5

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

#6

    <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. .setAttribute is 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 .setAttribute is this: var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")

“锚对象”有它自己的*(继承的)*属性来设置链接，它的文本。使用它们。setattribute更一般，但通常不需要。一个。title ="Blah"也会这样，而且更清楚!一个需要。setattribute的情况是:var myAttrib = "title";一个。setAttribute(myAttrib,“废话”)
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.

离开协议开放。而不是http://example.com/path考虑使用// /example.com/path。检查example.com是否可以通过http:和https:访问，但95%的站点同时使用这两种方式。
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 invocation error the first time you use it. That's because the assignment just 'grabs' .querySelector (a ref to the class method). With .bind(... you'll also involve the context (here it's document) and you get an object method that'll work as you might expect it.

OffTopic:这与在JS中创建链接并没有多大关系，但也许很好理解:有时，就像在chromes dev-console中，可以使用$(“body”)而不是document. queryselector(“body”)A _$ = document。queryselector将在第一次使用时使用非法调用错误，以“尊重”您的努力。这是因为赋值只是“抓取”. queryselector(类方法的ref)。与.bind(…您还将涉及上下文(这里是文档)，您将获得一个对象方法，该方法将按照您的期望工作。

#7

-4

You paste this inside :

你把这个贴在里面:

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

< A HREF = "指数。html " >点击这里< / >

秒客网

如何使用javascript创建链接?

7 个解决方案

#1

#2

With JavaScript

With JQuery

#3

#4

#5

#6

#7

#1

#2

With JavaScript

With JQuery

#3

#4

#5

#6

#7

相关文章