If i have a variable lets say
var id = //something dynamically generated
then i have <a href="http://localhost/ (the variable id)"
How do i go about this?
7 Answers
The concatenation cannot occur within the anchor tag itself, but you can set it like this:
<a id="my_anchor" href=""></a>
<script type="text/javascript">
// jQuery way
$( "#my_anchor" ).attr( 'href', 'http://localhost/' + id );
// Non-jQuery way
document.getElementById( "my_anchor" ).href = 'http://localhost/' + id;
</script>
Comments
Suppose:
<a id="yourLink" href="http://localhost/ (the variable id)" />
Plain JavaScript
document.getElementById('yourLink').href += id;
or in jQuery
$('#yourLink').attr('href', function() {
return this.href + id;
});
Comments
Nobody has pointed out you should always do encodeURIComponent when you set things like this; otherwise you leave yourself open to script injection attacks:
Taking @jayp's example:
<a href="#" id="mylink">My Link</a>
var id = getSomethingDynamic();
var url = "http://localhost/" + encodeURIComponent(id);
document.getElementById("mylink").href = url;
1 Comment
James
It depends what you're doing. encodeURIComponent encodes ? and & which he might want to use as part of his string building. We don't know exactly what he's trying to do or the wider context, so directly answering the question rather than guessing seems more sensible.
Something like this:
<a href="#" id="mylink">My Link</a>
var id = // something dynamic
var url = "http://localhost/"+id;
document.getElementById("mylink").href = url;
You don't have to wait for the document to have fully loaded, in most cases as long as the element has been loaded into the DOM you will be fine assuming that your Javascript is placed after the element (like above).
Not good practice, but it's misleading to say you "have" to wait for the whole page to be loaded. You don't.
Comments
Javascript function:
function openUrl(id)
{
window.location = "http://localhost/"+id
}
html:
<a href="javascript:void(0)" onclick="openUrl(id)">link</a>
Comments
Try this one, I used this
<script type="text/javascript">
var id = 2; //something dynamically generated
<a href='http://localhost/edit.php?catID "+id+" '>
<script>
Comments
You can just retrieve the DOM element, and add something to the href property. Like this:
<script type='text/javascript'>
var id = 5;
window.onload = function()
{
document.getElementById('url').href += id;
}
</script>
<a href='http://localhost/?id=' id='url'>Click me</a>
You have to wait for the document to load in order to get the element, it would not exist otherwise.
5 Comments
Domenic
It would if you put your
<script> tag after the <a> tag. Furthermore, overriding window.onload is very bad practice. -1
TJHeuvel
@Domenic Its a manner of personal preference, i prefer to put all CSS/Javascript on top. Overloading
window.onload is not bad practice, sure if you use jQuery or the likes there probably is some function to handle the onload request. Its the only way.TJHeuvel
I guess you could use AddEventListener, but that would make the example much less concise since it suffers from some cross-browser problems.
Domenic
Yes, using DOM0 events in 2011 is definitely bad practice. You are clobbering anyone else who wants to use DOM0 events.
TJHeuvel
Too bad those fancy new DOM events are not cross-browser compatible. I'm still keeping it this way, the OP should know this isnt production ready code.
