jQuery_jquery を使用して HTML 要素を動的に作成する一般的な方法の概要-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQuery_jquery を使用して HTML 要素を動的に作成する一般的な方法の概要

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:37 PM

html jquery 要素作成する動的方法

この記事の例では、jQuery を使用して HTML 要素を動的に作成する一般的な方法について説明します。これは、Web プログラミングに jQuery を使用する場合に非常に役立ちます。皆さんの参考に共有してください。具体的な方法は以下の通りです。

一般的に、HTML 要素は次の方法で動的に作成できます:

1. jQuery を使用して要素を作成するための構文
2. 動的コンテンツを配列に保存し、配列を走査して HTML 要素を動的に作成します
3. テンプレートを使用する

1. jQuery を使用して要素を動的に作成し、jQuery オブジェクトに追加します。

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <title></title>
   <script src="Scripts/jquery-1.10.2.js"></script>
   <script type="text/javascript">
     $(function() {
       $('<input />', {
         id: 'cbx',
         name: 'cbx',
         type: 'checkbox',
         checked: 'checked',
         click: function() {
           alert("点我了~~");
         }
       }).appendTo($('#wrap'));
     });
   </script>
 </head>
 <body>
   <div id="wrap"></div>
 </body>

ログイン後にコピー

操作効果は以下の通りです:

2. まずコンテンツを配列に入れ、次に配列を走査して html

に結合します。

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <title></title>
   <script src="Scripts/jquery-1.10.2.js"></script>
   <style type="text/css">
     table {
       border: solid 1px red;
       border-collapse: collapse;
     }
  
     td {
       border: solid 1px red;
     }
   </style>
   <script type="text/javascript">
     $(function () {
       var data = ["a", "b", "c", "d"];
       var html = '';
       for (var i = 0; i < data.length; i ++) {
         html += "<td>" + data[i] + "</td>";
       }
       $("#row").append(html);
     });
   </script>
 </head>
 <body>
   <table>
     <tr id="row"></tr>
   </table>
 </body>
 </html>

ログイン後にコピー

操作効果は以下の通りです:

3. テンプレートを使用して HTML を生成します

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <title></title>
   <script src="Scripts/jquery-1.10.2.js"></script>
   <script type="text/javascript">
     $(function () {
       var a = buildHTML("a", "我是由模版生成的", {
         id: "myLink",
         href: "http://www.baidu.com"
       });
  
       $('#wrap1').append(a);
  
       var input = buildHTML("input", {
         id: "myInput",
         type: "text",
         value: "我也是由模版生成的~~"
       });
  
       $('#wrap2').append(input);
     });
  
     buildHTML = function(tag, html, attrs) {
       // you can skip html param
       if (typeof (html) != 'string') {
         attrs = html;
         html = null;
       }
       var h = '<' + tag;
       for (attr in attrs) {
         if (attrs[attr] === false) continue;
         h += ' ' + attr + '="' + attrs[attr] + '"';
       }
       return h += html &#63; ">" + html + "</" + tag + ">" : "/>";
     };
   </script>
 </head>
 <body>
   <div id="wrap1"></div>
   <div id="wrap2"></div>
 </body>

ログイン後にコピー

操作効果は以下の通りです: