アンカーエレメントの href を書き換えると IE で表示がおかしくなる

以下のような HTML がある。

<body>
<a id="hoge"></a>
<script type="text/javascript">
document.getElementById("hoge").innerHTML = "hoge@foo";
document.getElementById("hoge").href = "http://google.co.jp";
</script>
</body>

これを IE で表示した際

hoge@foo

ではなく

http://google.co.jp

になってしまうバグに遭遇した。 アンカーエレメントの href 属性を書き換えた際、エレメントの中身が、URI 形式または E-Mail 形式だとまずいらしい。

Internet Explorer might reset Anchor's innerHTML incorrectly when a new "href" is assigned」が参考になった。

アドホックな解決策だが、href 属性を書き換えるときに余分な空白を入れればよい。

document.getElementById("hoge").href = " " + "http://google.co.jp";