jQuery - 画面にログ表示

公開日:2018-12-28 更新日:2019-05-14
[jQuery]

1. 概要

コンソールではなく、画面にログを表示します。

2. サンプル

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <input type="button" value="クリックするとログ出力します" onclick="log('ログ')" />
  <hr />
  <div id="log"></div>

  <script>

    //ログ出力
    var no = 1;
    function log(msg) {
      //ログを1行追加します
      $("#log").append ('<div>' + no++ + ":" + msg + '</div>');

      //ログの要素が10個より多くなった場合は、先頭の要素を削除します
      if ($("#log div").length > 10) {
        $("#log div:first").remove();
      }
    }

  </script>
</body></html>

実行結果:画面