Best IT Recipes

How to create a link using javascript?

I have a line for the title and a line for the link. I am not sure how to assemble these two in order to create a link on a page using Javascript. Any help is appreciated.

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

EDIT2: I am using jQuery, but completely new to this and did not know that this could help in this situation.

+82
javascript jquery dom html hyperlink
Jan 23 2018-11-11T00:
source share
7 answers
<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>
+161
Jan 23 2018-11-11T00:
source share

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

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

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

+38
Jan 23 '11 at 8:50
source share

Link building 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>
+11
Jan 23 2018-11-11T00:
source share

There are several ways:

If you want to use raw Javascript (without a helper such as jQuery), you can 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);

Another method is to write the link directly in the document:

 document.write("<a href='" + link + "'>" + text + "</a>");
+8
Jan 23 '11 at 7:52
source share

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
+1
Jan 23 2018-11-11T00:
source share

  <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\ a link' ); </script>

  • The "binding object" has its own * (inherited) * properties for setting the link, its text. So just use them. .setAttribute is more general, but you usually don't need it. a.title ="Blah" will do the same and become clearer! Well, the situation that will require .setAttribute is this: var myAttrib = "title"; a.setAttribute( myAttrib , "Blah") var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")

  • Leave the protocol open. Instead of http: //example.com/path, simply use //example.com/path. Check if example.com is accessible via http: as well as https: but 95% of sites will work on both.

  • OffTopic: This is not very important for creating links in JS, but it may be useful to know: Well, sometimes, as in the dev-console chrome, you can use $("body") instead of document.querySelector("body") A _$ = document.querySelector will "honor" your efforts with an illegal call error on first use. This is because the assignment simply โ€œcapturesโ€ .querySelector (a reference to the class method). With .bind(... you will also use the context (here it is document ) and you will get an object method that will work as you would expect.

0
Feb 01 '17 at 17:04 on
source share

You insert this inside:

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

-four
Apr 24 '16 at 18:11
source share


More articles:


All Articles