Make Hyperlink From Javascript

I want to use a hyperlink string in HTML page which I want to declare source link (URL) in my js file. Please tell me how can I call that URL from my js into html. Thanks

Solution 1:

There are a number of different ways to do this. You could use document.createElement() to create a link element, and then inject the element into the DOM. Or you could use the .innerHTML property of an element that you already have on the page to insert the link using text. Or you could modify the "href" attribute of an existing link on the page. All of these are possibilities. Here is one example:

Creating/Inserting DOM Nodes with DOM Methods

var link = document.createElement('a');
link.textContent = 'Link Title';
link.href = 'http://your.domain.tld/some/path';
document.getElementById('where_to_insert').appendChild(link);

Assuming you have something like this in your HTML:

 <span id="where_to_insert"></span>

Creating/Inserting DOM Content with innerHTML

And another example using innerHTML (which you should generally avoid using for security reasons, but which is valid to use in cases where you completely control the HTML being injected):

varwhere = document.getElementById('where_to_insert');
 where.innerHTML = '<a href="http://your.domain.tld">Link Title</a>';

Updating the Attributes of a Named DOM Node

Lastly, there is the method that merely updates the href attribute of an existing link:

document.getElementById('link_to_update').href = 'http://your.domain.tld/path';

... this assumes you have something like the following in your HTML:

 <a id="link_to_update" href="javascript:void(0)">Link Title</a>

Solution 2:

Try this:

var alink = document.createElement("a");
alink.href = "http://www.google.com";
alink.text = "Test Link";
document.getElementsByTagName("body")[0].appendChild(alink)

Solution 3:

From whatever I understand, You want to update href with JS variable. You can use Jquery to achieve it. try $("a").attr("href", js_variable) Refer this for more details How to change the href for a hyperlink using jQuery

Solution 4:

It seems like you would be able to do something like this:

Using Javascript.

var col2= document.getElementById('id_Of_Control');
col2.innerHTML="<a href='page2.html?" + params + "'>Page 2</a>";

where col2 is another container control something like div,span, or any.

Using jQuery.

Here I will recommend you to Use jQuery. So you can be more dynamic.

 $("#col2").append("<a href='page2.html?" + params + ">Page 2</a>");

OR

$("#col2").after("<a href='page2.html?" + params + ">Page 2</a>");

OR

$("#col2").before("<a href='page2.html?" + params + ">Page 2</a>");