document.getElementById to include href

Question

<script type="text/javascript">
document.getElementById("IDOFELEMENT");
</script>

What is the correct way to turn this into a link?

Can I write

<script type="text/javascript">
document.getElementById("IDOFELEMENT").href("http://www.address.com");
</script>

Many thanks.

score 7 · Accepted Answer · edited Feb 21 '13 at 20:52

7

javascript:

// this changes the href value<br>
document.getElementById("IDOFELEMENT").href = "http://www.address.com";

and the html:

<a href="www.toBeChanged.com" id="IDOFELEMENT">To Website< /a>

edited Feb 21 '13 at 20:52

Andrew Barber

39,603
20
94
123

answered Feb 21 '13 at 20:14

mimmo

86
1
3

score 3 · Answer 2 · answered Apr 18 '12 at 16:29

3

You should specify what kind of element is IDOFELEMENT. But you can't convert it to a link by just adding a href attribute, it only works if IDOFELEMENT is an hyperlink like <a id="IDOFELEMENT">stuff</a>

Simplest way is to add an onclick event to the element that changes the url to desired address:

<script type="text/javascript">
   var element = document.getElementById("IDOFELEMENT");
   element.setAttribute('onclick', 'window.location.href=\'http://address.com\'');
</script>

Or if you wanna wrap it with a hyperlink:

<script type="text/javascript">
   var element = document.getElementById("IDOFELEMENT");
   var parent = element.parentNode; 
   var link = document.createElement('a');
   link.href = 'http://www.address.com';
   link.appendChild(element.cloneNode(true)); 
   parent.replaceChild(link, element);
</script>

I hope this helps you.

answered Apr 18 '12 at 16:29

Skatox

4,237
12
42
47

sorry, your are correct in that I should have specified. The element is a ` – RCNeil Apr 18 '12 at 17:12
I don't think it will work, look this question for more information: http://stackoverflow.com/questions/33459/how-do-you-use-a-flash-object-as-a-link and http://stackoverflow.com/questions/1444562/javascript-onclick-event-over-flash-object – Skatox Apr 18 '12 at 17:22
Yea I think you're right. I posed the wrong question, so I'm debating whether I should remove this post or keep it because it does serve most other instances.... I certainly don't want to have everyone's effort go unnoticed... – RCNeil Apr 18 '12 at 17:28
keep it, it could help someone with the same doubt – Skatox Apr 19 '12 at 04:27

score 1 · Answer 3 · answered Dec 03 '19 at 09:36

I came accross the issue - Javascript error: Cannot read property 'parentNode' of null. I discovered this was due to executing this code while the DOM is not ready. window.onload solved the issue for me.

<script>
window.onload = function() {

   var element = document.getElementById("IDOFELEMENT");
   var parent = element.parentNode; 
   var link = document.createElement('a');
   link.href = 'http://www.google.com';
   link.appendChild(element.cloneNode(true)); 
   parent.replaceChild(link, element);
};
</script>

score 0 · Answer 4 · answered Apr 18 '12 at 16:56

0

You just need to wrap your element in an anchor tag as follows...

<a href="http://www.address.com">
    <div id="IDOFELEMENT">
    ... content ...
    </div>
</a>

answered Apr 18 '12 at 16:56

mayhewr

4,003
1
18
15

document.getElementById to include href

4 Answers4

Linked