Consider I have a JavaScript variable named link which contains a URL like this: www.google. I need to include this variable in href attribute in 2 places, like:

<a href="link">link</a>

This should return something like this: Google

I tried various ways but failed. Is it possible to do like this? The JavaScript variables should be used at both places.

Note: I need to use the variable inside <a> tag also

Consider I have a JavaScript variable named link which contains a URL like this: www.google.com. I need to include this variable in href attribute in 2 places, like:

<a href="link">link</a>

This should return something like this: Google

I tried various ways but failed. Is it possible to do like this? The JavaScript variables should be used at both places.

Note: I need to use the variable inside <a> tag also

• javascript
• html

• 2 I tried various ways but failed Could you at least show us 2 of your tries? – asprin Commented May 27, 2014 at 7:57
• Can you place the sample code what you tried ? – Radhakrishna Rayidi Commented May 27, 2014 at 7:59
• I tried something like this: var link = "www.google.com"; document.write("<a href=\"" + link + "\">" + link + "</a>"; I got the above method from here: stackoverflow.com/questions/2121491/how-to-add-a-var-to-href – user3678812 Commented May 27, 2014 at 8:02
• 1 @user3678812 please update your question and add the additional info there, so that any future readers can understand the problem easily.. – T J Commented May 27, 2014 at 8:05
• @user3678812 do you have the text that should be updated inside the link, or do we have to extract it from the link..? – T J Commented May 27, 2014 at 8:22

5 Answers 5

Assume you have the following in your HTML

<a href="link" class='dynamicLink'>link</a>
<a href="link" class='dynamicLink'>link</a>

You can do the following

var href = 'http://www.google.com'; //any other link as wish
var links = document.getElementsByClassName('dynamicLink');

Array.from(links).forEach(link => {
  link.href = href;
  link.innerHTML = href.replace('http://', '');
});

JSFiddle

You can use the following code.

<a id="myLink" href="link">link</a>

in your javascript try

<script>
    var link = "http://www.google.com/";
    document.getElementById('myLink').setAttribute("href",link);
    document.getElementById('myLink').innerHTML = link;
    // Here the link is your javascript variable that contains the url.
</script>

Sorry for any typo. Writing on my phone. Can't you create the anchor on the fly?

anchor =Document.createElement (...)
anchor.href=yourvar-value
anchor.innerText=your-value?

If a more complex thing is needed search for javascript databiding on Google

Take care

You can do it like this -

WORKING DEMO - http://codepen.io/nitishdhar/pen/rJLEH

HTML Part

<a href="" class="link">Link will be filled by javascript</a>

You need to place a specific class in the a tag. We will need this to get hold of this element from jQuery.

Javascript Part (Using jQuery)

var link = "http://google.com";
$(document).ready(function(){
  $('.link').attr('href', link);
});

We need to create a variable, link, which will hold the URL you want to assign to the a tag. Then on document ready, we get hold of the a element & update its href attribute with the link.

You can do this easy by jquery.

1st give your a class/id.

<a class="mylink">link</a>

Then you can do something like:

<script  type='text/javascript'>

$(document).ready(function () {
   $("a.mylink").attr("href", link);
});

</script>

If you want the text to change as well you will have to add

$("a.mylink").text(link);

to $(document).ready as well.

See it working: http://jsfiddle.net/symXp/