javascriptとブラウザのコンソールについて
解決したいこと
お世話になります。
以下のhtmlを実行した時の挙動について、お教えください。
<body>
<div id="content"></div>
</body>
<script>
var tag = document.createElement('p'); //[1]
tag.id = 'あ'; //[2]
tag.textContent = "あ" ; //[3]
console.log("tag-id1:" , tag.id); //[4]
console.log("tag1:" , tag); //[5]
tag.id = 'い'; //[6]
tag.textContent = "い" ; //[7]
console.log("tag-id2:" , tag.id); //[8]
console.log("tag2:" , tag); //[9]
</script>
もちろん画面には何も表示されないのですが、
コンソールで見ると、[5]の結果が、「い」になります。
期待しているのは、「あ」です。ちなみに[4]の結果は「あ」です。
参照渡し的なあたりに原因があるのかと、かなり悩んだのですが、chromeで何度も更新していると、時折り表示が変わることが分かりました。値も変わりますが、表示の様式も変わります。
edgeも同様です。
さらに、firefoxだと、逆に「あ」の事が多いですがやはり100%ではありません。
この現象はいったい何なのでしょうか?
この様なコードの書き方をした場合、なにかしらの事が保証されず、都度の状況やブラウザの仕様に拠って結果が不定となってしまうのではないかと想像しているのですが、どこに問題があるのでしょうか?
よろしくお願いいたします。