How do I create a link using javascript?

JavascriptJqueryHtmlDomHyperlink

Javascript Problem Overview


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.

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.

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

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

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

2.

    document.getElementsByTagName('body')[0].innerHTML += '<a href="'+desiredLink+'">'+desiredText+'</a>';
    
or, as suggested by [@travis](https://stackoverflow.com/users/1414/travis) : 

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

3.

With JQuery

  1.  $('<a href="'+desiredLink+'">'+desiredText+'</a>').appendTo($('body'));
    
  2.  $('body').append($('<a href="'+desiredLink+'">'+desiredText+'</a>'));
    
  3.  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 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.

Solution 3 - Javascript

Create links using 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>

Solution 4 - Javascript

There are a couple of ways:

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

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

Solution 5 - Javascript

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

  1. 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")

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

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

Solution 6 - Javascript

Dynamically create a hyperlink with raw JavaScript:

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

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

Solution 7 - Javascript

You paste this inside :

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionXavierView Question on Stackoverflow
Solution 1 - JavascriptJared FarrishView Answer on Stackoverflow
Solution 2 - Javascriptgion_13View Answer on Stackoverflow
Solution 3 - JavascriptNaveedView Answer on Stackoverflow
Solution 4 - JavascriptRoopinderView Answer on Stackoverflow
Solution 5 - JavascriptNaduView Answer on Stackoverflow
Solution 6 - Javascriptjmort253View Answer on Stackoverflow
Solution 7 - JavascriptzerodunwashView Answer on Stackoverflow