Question

I set the href-Attribute of an <a ...>-Tag dynamically in a project. At some other point, I check the <a>‘s DOM-Property called hostname, in order to figure out whether or not it’s an internal link.

Basically, this is what happens.

<!--HTML-->
<a id="my" href="/my/first/link">MyLink</a>
<div id="log"></div>

And JS is:

// js
var a = document.getElementById( 'my' ),
    log = document.getElementById( 'log' );

log.innerHTML += a.hostname + '<br/>';

a.setAttribute('href',"/my/other/link");
log.innerHTML += a.hostname;

(cf. also this fiddle: http://jsfiddle.net/RurQT/ )

As I set d.href to a relative path, I expect d.hostname to be unchanged – so the log-Div contains the same Hostname twice. This is correct in FF and Chrome.

However, InternetExplorer 7, 8 and 9 all insist that the second time, the hostname is empty.

I am especially confused, because the first link has been relative all along! I don’t have any <base href> set, btw.

I would greatly appreciate any suggestion how I can make InternetExplorer update the “hostname”-Property of the a-DOM-Element.

Answer 1

You’ll have to stash and re-set it it seems:

var d = document.getElementById( 'my' ),
var h = d.hostname
d.setAttribute('href',"/my/other/link");
d.hostname = h