jqueryのinnerHTML等の一覧
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <title>jqueryのinnerHTML等の一覧</title>
- <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
- <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- ko.applyBindings(new ViewModel());
- });
- function ViewModel()
- {
- var self = this;
-
- sample = $('.sample');
-
- koView = "";
- koView += "<table>";
- koView += "<tr><th>入力内容</th><th>出力結果(タブや改行もちゃんと取得される)</th></tr>";
- koView += ConvertHtml(sample[0].textContent, "textContent");
- koView += ConvertHtml(sample[0].innerHTML, "innerHTML");
- koView += ConvertHtml(sample[0].innerText, "innerText");
- koView += ConvertHtml(sample[0].outerHTML, "outerHTML");
- koView += ConvertHtml(sample[0].outerText, "outerText");
- koView += "</table>";
-
- self.viewSource = ko.observable(koView);
- };
-
- // 全置換:全ての文字列 org を dest に置き換える
- function replaceAll(expression, org, dest)
- {
- return expression.split(org).join(dest);
- }
-
- // 出力用にタグとか文字の置換え
- function ConvertChar(original)
- {
- data01 = original;
- data02 = replaceAll(data01, "<", "<");
-
- lastData = data02;
- return lastData;
- }
-
- // 出力用にタグとか文字の置換え
- function ConvertHtml(result, property)
- {
- data = "";
- data += "<tr>";
- data += "<th>sample[0]." + property + "</th>";
- if(result == undefined)
- {
- data += "<td style='color:red;'><pre>このブラウザだと「" + property + "」は「undefined」</pre></td>";
- }
- else
- {
- data += "<td><pre>" + ConvertChar(result) + "</pre></td>";
- }
- data += "</tr>";
- return data;
- }
-
- </script>
- <style type="text/css">
- body,th,td
- {
- font-size:10pt;
- }
- table{
- border-collapse:collapse;
- margin:0;
- }
- td, th{
- border:1px solid #ccc;
- padding:5px;
- text-align:left;
- }
- th{
- background:#e0e0e0;
- }
- pre{
- margin:0;
- padding:0;
- }
- </style>
- </head>
- <body>
- <h1>jqueryのinnerHTML等の一覧</h1>
- <div>
- <div class="sample">
- <a href="#">サンプルリンク</a><br />
- <img src="images/sample_flow1.gif" alt="サンプル画像" />
- <p>サンプル文章1</p>
- <p>サンプル文章2</p>
- </div>
- </div>
- <h2>以下、「class="sample"」のinnerHTML等の一覧</h1>
- <div data-bind="html: viewSource"></div>
- <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
- <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
- <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
- </div>
- <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
- Copyright © 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
- </div>
- </body>
- </html>