IE にて a 要素の下に "@" を含む TextNode を append するとおかしくなる事がある件

JavaScript 

<!DOCTYPE html>

<html>

  <head>

    <title>test</title>

  </head>

  <body>

    <div id="for_test"></div>

    <script type="text/javascript">

        var p_elem = document.getElementById("for_test");

        var test_elem = p_elem.appendChild( document.createElement("a") );

        test_elem.appendChild( document.createTextNode(" @test ") );

        test_elem.setAttribute( "href", "http://example.com/" );

    </script>

  </body>

</html>

という HTML を表示すると、本来は

@test

となるはずであるのに IE 6, 7, 8 で表示すると

http://example.com/

となってしまう。 謎。 どうやら @ 記号がダメみたいです。

回避方法

<!DOCTYPE html>

<html>

  <head>

    <title>test</title>

  </head>

  <body>

    <div id="for_test"></div>

    <script type="text/javascript">

        var p_elem = document.getElementById("for_test");

        var test_elem = p_elem.appendChild( document.createElement("a") );

        test_elem.appendChild( document.createElement("span") ).appendChild( document.createTextNode(" @test ") );

        test_elem.setAttribute( "href", "http://example.com/" );

    </script>

  </body>

</html>

という風に、a 要素の下に直接 TextNode をくっつけるのではなく、span 要素を間に入れるとこの問題は回避できる。

回避方法 2 [2009-12-24 追記]

はてブにて id:mgng さんより教えて頂きました。 下記のように Element#setAttribute を先に行い、後から Node#appendChild を行うという方法でも期待通りの実行結果となります。

<!DOCTYPE html>

<html>

  <head>

    <title>test</title>

  </head>

  <body>

    <div id="for_test"></div>

    <script type="text/javascript">

        var p_elem = document.getElementById("for_test");

        var test_elem = p_elem.appendChild( document.createElement("a") );

        // Element#setAttribute を先に行う

        test_elem.setAttribute( "href", "http://example.com/" );

        // その後で Node#appendChild を行う

        test_elem.appendChild( document.createTextNode(" @test ") );

    </script>

  </body>

</html>