「jqueryのinnerHTML等の一覧」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

jqueryのinnerHTML等の一覧

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>jqueryのinnerHTML等の一覧</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  9. <script type="text/javascript">
  10.   $(document).ready(function () {
  11.     ko.applyBindings(new ViewModel());
  12.   });
  14.   function ViewModel()
  15.   {
  16.     var self = this;
  17.     
  18.     sample = $('.sample');
  19.     
  20.     koView = "";
  21.     koView += "<table>";
  22.     koView += "<tr><th>入力内容</th><th>出力結果（タブや改行もちゃんと取得される）</th></tr>";
  23.     koView += ConvertHtml(sample[0].textContent, "textContent");
  24.     koView += ConvertHtml(sample[0].innerHTML, "innerHTML");
  25.     koView += ConvertHtml(sample[0].innerText, "innerText");
  26.     koView += ConvertHtml(sample[0].outerHTML, "outerHTML");
  27.     koView += ConvertHtml(sample[0].outerText, "outerText");
  28.     koView += "</table>";
  29.     
  30.     self.viewSource = ko.observable(koView);
  31.   };
  32.   
  33.   // 全置換：全ての文字列 org を dest に置き換える
  34.   function replaceAll(expression, org, dest)
  35.   {
  36.     return expression.split(org).join(dest);
  37.   }
  38.   
  39.   // 出力用にタグとか文字の置換え
  40.   function ConvertChar(original)
  41.   {
  42.     data01 = original;
  43.     data02 = replaceAll(data01, "<", "&lt;");
  44.     
  45.     lastData = data02;
  46.     return lastData;
  47.   }
  48.   
  49.   // 出力用にタグとか文字の置換え
  50.   function ConvertHtml(result, property)
  51.   {
  52.     data = "";
  53.     data += "<tr>";
  54.     data += "<th>sample[0]." + property + "</th>";
  55.     if(result == undefined)
  56.     {
  57.       data += "<td style='color:red;'><pre>このブラウザだと「" + property + "」は「undefined」</pre></td>";
  58.     }
  59.     else
  60.     {
  61.       data += "<td><pre>" + ConvertChar(result) + "</pre></td>";
  62.     }
  63.     data += "</tr>";
  64.     return data;
  65.   }
  66.   
  67. </script>
  69. <style type="text/css">
  70. body,th,td
  71. {
  72.   font-size:10pt;
  73. }
  75. table{
  76.   border-collapse:collapse;
  77.   margin:0;
  78. }
  80. td, th{
  81.   border:1px solid #ccc;
  82.   padding:5px;
  83.   text-align:left;
  84. }
  86. th{
  87.   background:#e0e0e0;
  88. }
  90. pre{
  91.   margin:0;
  92.   padding:0;
  93. }
  94. </style>
  96. </head>
  97. <body>
  98. <h1>jqueryのinnerHTML等の一覧</h1>
  100. <div>
  101.   <div class="sample">
  102.     <a href="#">サンプルリンク</a><br />
  103.     <img src="images/sample_flow1.gif" alt="サンプル画像" />
  104. <p>サンプル文章１</p>
  105.     <p>サンプル文章２</p>
  106.   </div>
  107. </div>
  109. <h2>以下、「class="sample"」のinnerHTML等の一覧</h1>
  110. <div data-bind="html: viewSource"></div>
  112. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  113. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  114. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  115. </div>
  117. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  118. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  119. </div>
  121. </body>
  122. </html>