殴り書きのメモ: Javascriptで水平線(<HR>)の後に文字を入力した時の表示が意外な結果になった

2013年8月21日水曜日

Javascriptで水平線(<HR>)の後に文字を入力した時の表示が意外な結果になった

水平線の後に文字を表示するJavascriptを作る場合、通常はinnerHTMLを使うと思う(サンプル1)。

サンプル1(ココをクリックで開閉)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function test(){
        comm.innerHTML = "<hr>";
        comm.innerHTML += "おはよう";
      }
    </script>
  </head>
  <body onload="test()">
    <div id="comm">
    </div>
  </body>
</html>

結果：IE,Chrome,Firefoxで確認

ところが、違うコードにしてみると(サンプル2)、意外な結果になった。

サンプル2(ココをクリックで開閉)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function test(){
        var comm = document.getElementById("comm");
        comm.appendChild(document.createElement("hr"));
        comm.innerText += "おはよう";
      }
    </script>
  </head>
  <body onload="test()">
    <div id="comm">
    </div>
  </body>
</html>

結果：IE,Chromeで確認

結果：Firefoxで確認

ふーん。そうなんだ。変だ。。。

なお、実施環境は下記。
OS: Windows 7 Progessional(64bit) Service Pack1
Firefox: 23.0.1
IE: 10.0.9200.16660
Chrome: 28.0.1500.95m

殴り書きのメモ

2013年8月21日水曜日

Javascriptで水平線(<HR>)の後に文字を入力した時の表示が意外な結果になった

0 件のコメント:

コメントを投稿