[2020/05/02] JavaScript jQuery w2ui.grid を使ったグリッド処理・カラム名のグループ化(タイトルの2行表示) (No.168)
[2020/05/01] JavaScript jQueryでAjaxを使いJSONファイルから一連のデータを設定する方法 (select, ul) (No.167)
[2020/04/30] JavaScript jQueryで Form のSUMITを処理する方法( submit() ) (No.166)
[2020/04/29] JavaScript jQueryで要素を追加する方法(append,appendTo,before,after) (No.165)
-
JavaScript には日付用のデータ型がありませんが、その代わりとして Dateオブジェクト が存在します。
この Dateオブジェクト は日付の設定、取得、操作を行うためのメソッドを持っていますのでそれをプログラムから利用できます。 尚 Dateオブジェクト にはプロパティがありません。
Dateオブジェクト はUnixタイムスタンプが 1970年1月1日 00:00:00 からの秒の数値であるのと同様に、ミリ秒の数値で日付を格納しています。
■Dateオブジェクトのコンストラクタについて
// 年,月,日,時,分,秒,ミリ秒 を個別に指定 objDate = new Date(yead, month [, day [, hour [, min [, sec [, milisec] ] ] ] ]); // Unix Time を指定(1970/01/01 00:00:00)からの時間をミリ秒単位で指定 objDate = new Date(unixtime); // 文字列で時刻を指定 objDate = new Date(string); // 引数無しは現在時刻 objDate = new Date();
上記の4種類の Dateオブジェクト の生成方法があります。それぞれの例を順次以下に示します。
■年,月,日,時,分,秒,ミリ秒 を個別に指定
objDate = new Date(2020, 4); console.log(objDate); objDate = new Date(2020, 4, 10); console.log(objDate); objDate = new Date(2020, 4, 10, 13); console.log(objDate); objDate = new Date(2020, 4, 10, 13, 59); console.log(objDate); objDate = new Date(2020, 4, 10, 13, 59, 59); console.log(objDate); objDate = new Date(2020, 4, 10, 13, 59, 59, 150); console.log(objDate);
ブラウザの開発環境のコンソールを見ると以下の様になります。(この表示はFirefoxです)
尚、月の指定は 1月~12月が 0 ~ 11 で設定しますので注意が必要です。Date Fri May 01 2020 00:00:00 GMT+0900 (日本標準時) Date Sun May 10 2020 00:00:00 GMT+0900 (日本標準時) Date Sun May 10 2020 13:00:00 GMT+0900 (日本標準時) Date Sun May 10 2020 13:59:00 GMT+0900 (日本標準時) Date Sun May 10 2020 13:59:59 GMT+0900 (日本標準時) Date Sun May 10 2020 13:59:59 GMT+0900 (日本標準時)
■Unix Time を指定(1970/01/01 00:00:00)からの時間をミリ秒単位で指定
// 1日のミリ秒 var dateMilisec = 24 * 60 * 60 * 1000; // 2020年1月1日までのミリ秒 var allMilisec = 50 * 365 * dateMilisec + 12 * dateMilisec; // Dateオブジェクト var objDate = new Date(allMilisec); console.log(objDate);
ブラウザの開発環境のコンソールを見ると以下の様になります。(この表示はFirefoxです)
Date Wed Jan 01 2020 09:00:00 GMT+0900 (日本標準時)
■文字列で時刻を指定
var objDate; objDate = new Date("2020-05-08T13:59:59"); console.log(objDate); objDate = new Date("2020/05/08 13:59:59"); console.log(objDate); objDate = new Date("05/08/2020 23:59:59"); console.log(objDate);
ブラウザの開発環境のコンソールを見ると以下の様になります。(この表示はFirefoxです)
Date Fri May 08 2020 13:59:59 GMT+0900 (日本標準時) Date Fri May 08 2020 13:59:59 GMT+0900 (日本標準時) Date Fri May 08 2020 23:59:59 GMT+0900 (日本標準時)
■引数無しは現在時刻
// 引数無し var objDate = new Date(); console.log(objDate);
ブラウザの開発環境のコンソールを見ると以下の様になります。(この表示はFirefoxです)
尚、この実行は 2020年5月11日 に行いました。Date Mon May 11 2020 16:41:40 GMT+0900 (日本標準時)
■Dateオブジェクトのメソッドについて
Dateオブジェクト のメソッドは下記の接頭語の付いたものが在りそれぞれに分類されます。
- 「get」メソッド:Dateオブジェクトの日時等の取得メソッド
- 「set」メソッド:Dateオブジェクトへ日時等の設定メソッド
- 「to」メソッド:Dateオブジェクトから文字列変換メソッド
- 「parse」「UTC」メソッド:Date文字列を解析
■「get」メソッド:Dateオブジェクトの日時等の取得メソッド
// Dateオブジェクト var objDate = new Date(2020, 5, 10, 13, 59, 50, 150); var str = ""; str += objDate.getFullYear(); // 年(1900 年以降の年) str += "/" + (objDate.getMonth() + 1); // 月(0 〜 11 ) str += "/" + objDate.getDate(); // 日(1 〜 31 ) str += " " + objDate.getHours(); // 時(0 〜 23) str += ":" + objDate.getMinutes(); // 分(0 〜 59) str += ":" + objDate.getSeconds(); // 秒(0 〜 59) str += "." + objDate.getMilliseconds(); // ミリ秒(0 〜 999) console.log(str);
ブラウザの開発環境のコンソールを見ると以下の様になります。
2020/5/10 13:59:50.150
尚、月日時分秒に先頭ゼロを付加する場合は以下の様にします。
// 2020/05/08 09:05:06.050 の設定 objDate = new Date(2020, 4, 8, 9, 5, 6, 50); str = ""; str += objDate.getFullYear(); // 年(1900 年以降の年) str += "/" ('0' + (objDate.getMonth() + 1)).substr(-2); // 月(0 〜 11 ) str += "/" ('0' + objDate.getDate()).substr(-2); // 日(1 〜 31 ) str += " " ('0' + objDate.getHours()).substr(-2); // 時(0 〜 23) str += ":" ('0' + objDate.getMinutes()).substr(-2); // 分(0 〜 59) str += ":" ('0' + objDate.getSeconds()).substr(-2); // 秒(0 〜 59) str += "." ('00' + objDate.getMilliseconds()).substr(-3); // ミリ秒(0 〜 999) console.log(str);
ブラウザの開発環境のコンソールを見ると以下の様になります。
2020/05/08 09:05:06.050
■「set」メソッド:Dateオブジェクトへ日時等の設定メソッド
var objDate = new Date(); // オブジェクト生成(現在時) objDate.setFullYear(2020); // 年 objDate.setMonth(3); // 月 objDate.setDate(30); // 日 objDate.setHours(13); // 時 objDate.setMinutes(59); // 分 objDate.setSeconds(49); // 秒 objDate.setMilliseconds(123); // ミリ秒 console.log(objDate);
ブラウザの開発環境のコンソールを見ると以下の様になります。
Date Thu Apr 30 2020 13:59:49 GMT+0900 (日本標準時)
この例では 4月30日 の設定ですが setDate で 31日を設定すると結果は 5月1日 になります。 該当する月の日付の範囲を超えた場合は翌月、前月への調整が行われます。
var objDate = new Date(); // オブジェクト生成(現在時) objDate.setFullYear(2020); // 年 objDate.setMonth(3); // 月 objDate.setDate(31); // 日(あり得ない 4月31日 設定) console.log(objDate); // オブジェクト内の月は、5月に調整される objDate.setDate(0); // 日(あり得ない 5月0日 設定) console.log(objDate); // オブジェクト内の月は、4月に調整される objDate.setFullYear(2020); // 年 objDate.setDate(-1); // 日(あり得ない 4月-1日 設定) console.log(objDate);
ブラウザの開発環境のコンソールを見ると以下の様になります。
Date Fri May 01 2020 18:08:01 GMT+0900 (日本標準時) Date Thu Apr 30 2020 18:08:01 GMT+0900 (日本標準時) Date Mon Mar 30 2020 18:08:01 GMT+0900 (日本標準時)
setDate() の値が「0」の場合はオブジェクト内の月の1日から見て「-1」した日付になります。 (これを使うと月の最終日を求めることが出来ます。)
また、setDate() の値が「-1」の場合はオブジェクト内の月の1日から見て「-2」した日付になります。
尚、このことはsetHours() , setMinutes() , setSeconds() においても指定値の範囲を超えた場合は 日付のオブジェクト内を調整されます。
■「to」メソッド:Dateオブジェクトから文字列変換メソッド
var objDate = new Date("2020/05/08 13:59:59"); console.log( objDate.toString() ); console.log( objDate.toDateString() ); console.log( objDate.toTimeString() );
ブラウザの開発環境のコンソールを見ると以下の様になります。
Fri May 08 2020 13:59:59 GMT+0900 (日本標準時) Fri May 08 2020 13:59:59 GMT+0900 (日本標準時)
■Dateオブジェクトの使用上の注意点
Dateオブジェクト を使用する時に注意する点があります。それはオブジェクトのコピーを作る時です。 以下の例を見て下さい。
// Dateオブジェクトの生成 var date1 = new Date("2020/05/08"); // Dateオブジェクトのコピー var date2 = date1; // コピー先での月を「2月」に設定 date2.setMonth(1); console.log("date1 : " + date1); console.log("date2 : " + date2);
ブラウザの開発環境のコンソールを見ると以下の様になります。
1行目は「date1」の表示なので「5月(May)」と表示されそうなものですが「date2」と同じものが表示されます。date1 : Sat Feb 08 2020 00:00:00 GMT+0900 (日本標準時) date2 : Sat Feb 08 2020 00:00:00 GMT+0900 (日本標準時)
この原因はソースの4行目にあります。
「date1」を「date2」にコピーしている様に見えますが、実際 Dateオブジェクト はクラスのため参照がコピーされているからです。 このコピーで「date1」「date2」ともに Dateオブジェクト の実体(インスタンス)は同じところを指しています。
それで「date2」で「setMonth」を行って「date1」からデータを見ても同じものになります。
結果、クラスデータを別の変数にコピーしたい場合は(コピーの様なもの)、 既に存在しているオブジェクトの値で、別の変数に対して生成します。 上記のソースを変更します。// Dateオブジェクトの生成 var date1 = new Date("2020/05/08"); // 最初のオブジェクト値で、別のDateオブジェクトの生成 var date2 = new Date(date1.getTime()); // コピー先での月を「2月」に設定 date2.setMonth(1); console.log("date1 : " + date1); console.log("date2 : " + date2);
結果は正しく異なる日付になっています。
date1 : Fri May 08 2020 00:00:00 GMT+0900 (日本標準時) date2 : Sat Feb 08 2020 00:00:00 GMT+0900 (日本標準時)
※クラスのオブジェクトを扱う場合はコピーをする場合は注意が必要です。
PR -
今回は w2ui.grid のカラム名のグループ化を指示するプロパティである columnGroups ついて説明をします。
この columnGroups を宣言することでカラム名タイトルの上に1行追加してグループ化したタイトルが表示出来たり、タイトル2行を1行にして表示できます。
columnGroups プロパティのオブジェクトの構造は以下の通りです。columnGroups = { span : 1, // カラム結合数 caption : '', // グループの caption master : false // true :カラムで宣言された caption を優先 // false:columnGroups の caption を優先(デフォルト) }
以下に紹介したページのHTMLに columnGroups プロパティを追加します。
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理方法の紹介
<!DOCTYPE html> <html> <head> <title>w2ui Grid-6 columnGroups</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui-1.5.rc1.css" /> <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./dist/w2ui-1.5.rc1.js"></script> </head> <body> <div id="grid" style="width: 500px; height: 200px;"></div> <script> $(function () { // id="grid" へのグリッド設定 $('#grid').w2grid({ name: 'grid', columnGroups: [ { span: 1, caption: '' , master: true }, { span: 2, caption: 'Name' }, { span: 1, caption: 'Email' }, { span: 1, caption: '' , master: true } ], columns: [ { field: 'recid', caption: 'ID' , size: '40px' }, { field: 'fname', caption: 'First Name', size: '30%' }, { field: 'lname', caption: 'Last Name' , size: '30%' }, { field: 'email', caption: 'Email' , size: '30%' }, { field: 'sdate', caption: 'Start Date', size: '100px' } ], records: [ { recid: 1, fname: 'John' , lname: 'Doe' , email: 'jdoe@gmail.com', sdate: '2020/03/01' }, { recid: 2, fname: 'Stuart' , lname: 'Motzart', email: 'smot@gmail.com', sdate: '2020/03/12' }, { recid: 3, fname: 'Jin' , lname: 'Franson', email: 'jgra@gmail.com', sdate: '2020/03/13' }, { recid: 4, fname: 'Susan' , lname: 'Ottie' , email: 'sott@gmail.com', sdate: '2020/03/24' }, { recid: 5, fname: 'Kelly' , lname: 'Silver' , email: 'ksil@gmail.com', sdate: '2020/03/25' }, { recid: 6, fname: 'Francis', lname: 'Gatos' , email: 'fgat@gmail.com', sdate: '2020/03/26' }, { recid: 7, fname: 'Mark' , lname: 'Welldo' , email: 'mwel@gmail.com', sdate: '2020/03/27' }, { recid: 8, fname: 'Thomas' , lname: 'Bahh' , email: 'tbah@gmail.com', sdate: '2020/03/28' } ] }); }); </script> </body> </html>
これを実行させると以下の様な表示になります。
master:true のカラムは columns の caption がヘッダに表示され span: 2 の部分は2カラムが結合されます。
尚、今回読込んでいる w2ui の JavaScript ソースですが最新バージョンの w2ui-1.5.rc1.js に変更しました。
この w2ui-1.5.rc1 バージョンでないとブラウザのコンソールに以下の警告メッセージが表示される様です。 (皆さんもご注意ください。)NOTICE: grid column.caption property is deprecated, please use column.text. Column -> Object { field: "recid", caption: "ID", size: "40px", sizeCalculated: "40px", sizeType: "px", min: 20, text: "ID" } w2grid.js:6751:32 NOTICE: grid column.caption property is deprecated, please use column.text. Column -> Object { field: "fname", caption: "First Name", size: "30%", sizeType: "%", sizeCalculated: "114px", min: 20, text: "First Name", sizeCorrected: "33.33%" } w2grid.js:6751:32 NOTICE: grid column.caption property is deprecated, please use column.text. Column -> Object { field: "lname", caption: "Last Name", size: "30%", sizeType: "%", sizeCalculated: "113px", min: 20, text: "Last Name", sizeCorrected: "33.33%" } w2grid.js:6751:32 NOTICE: grid column.caption property is deprecated, please use column.text. Column -> Object { field: "email", caption: "Email", size: "30%", sizeType: "%", sizeCalculated: "113px", min: 20, text: "Email", sizeCorrected: "33.33%" } w2grid.js:6751:32 NOTICE: grid column.caption property is deprecated, please use column.text. Column -> Object { field: "sdate", caption: "Start Date", size: "100px", sizeCalculated: "100px", sizeType: "px", min: 20, text: "Start Date" } w2grid.js:6751:32 NOTICE: grid columnGroup.caption property is deprecated, please use columnGroup.text. Group -> Object { span: 1, caption: "", master: true, text: "" } w2grid.js:6624:28
-
今回は Ajax を使い JSON ファイルから配列データを取得し select などに設定する例を示します。
今回の例は都道府県のコードと名称を読込んで select に設定することを行います。
先ずは以下の様な都道府県のコードと名称のリストである JSON ファイルを用意します。[ {"id":"01", "name":"北海道"}, {"id":"02", "name":"青森県"}, {"id":"03", "name":"岩手県"}, {"id":"04", "name":"宮城県"}, {"id":"05", "name":"秋田県"}, {"id":"06", "name":"山形県"}, {"id":"07", "name":"福島県"}, {"id":"08", "name":"茨城県"}, {"id":"09", "name":"栃木県"}, {"id":"10", "name":"群馬県"}, {"id":"11", "name":"埼玉県"}, {"id":"12", "name":"千葉県"}, {"id":"13", "name":"東京都"}, {"id":"14", "name":"神奈川県"}, {"id":"15", "name":"新潟県"}, {"id":"16", "name":"富山県"}, {"id":"17", "name":"石川県"}, {"id":"18", "name":"福井県"}, {"id":"19", "name":"山梨県"}, {"id":"20", "name":"長野県"}, {"id":"21", "name":"岐阜県"}, {"id":"22", "name":"静岡県"}, {"id":"23", "name":"愛知県"}, {"id":"24", "name":"三重県"}, {"id":"25", "name":"滋賀県"}, {"id":"26", "name":"京都府"}, {"id":"27", "name":"大阪府"}, {"id":"28", "name":"兵庫県"}, {"id":"29", "name":"奈良県"}, {"id":"30", "name":"和歌山県"}, {"id":"31", "name":"鳥取県"}, {"id":"32", "name":"島根県"}, {"id":"33", "name":"岡山県"}, {"id":"34", "name":"広島県"}, {"id":"35", "name":"山口県"}, {"id":"36", "name":"徳島県"}, {"id":"37", "name":"香川県"}, {"id":"38", "name":"愛媛県"}, {"id":"39", "name":"高知県"}, {"id":"40", "name":"福岡県"}, {"id":"41", "name":"佐賀県"}, {"id":"42", "name":"長崎県"}, {"id":"43", "name":"熊本県"}, {"id":"44", "name":"大分県"}, {"id":"45", "name":"宮崎県"}, {"id":"46", "name":"鹿児島県"}, {"id":"47", "name":"沖縄県"} ]
HTML ファイル側のソースですが以下の様になります。
Ajax からの正常戻りの関数で、引数には JSON データの配列が返りますので それを option 句のリストとして整形してやり select の子要素に追加します。
■Ajaxを使いJSONファイルからデータを取得
<html> <head> <meta charset="utf-8"> <title>test ajax json file</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <h2>test ajax json file</h2> 都道府県: <select name="SelectPref" id="SelectPref"> <option value=""></option> </select> <button onclick="getPrefData();">Ajax</button> <script type="text/javascript"> function getPrefData() { $.ajax({ type: "GET", url: "pref.json", dataType: "json", cache: false, success: function(PrefData) { // select の内容削除 $("#SelectPref").empty(); var append = '<option value=""></option> '; // JSON データを option に展開生成 for(var i = 0; i < PrefData.length; i++) { append += '<option value="' + PrefData[i].id + '" >'; append += PrefData[i].name; append += '</option>'; append += ' '; } /* forループを以下の様にしてもOK $.each(PrefData, function(i) { append += '"; append += PrefData[i].name; append += ''; append += ' "; }); */ // select の内容に設定 $("#SelectPref").append(append); } }); return false; } </script> </body> </html>
簡単なマスタデータを JSON ファイルにまとめて上記の様に取得すれば、区分データぐらいであれば特にデータベースを使わないでもいけると思います。
-
今回は jQuery でForm のSUMITを処理する為に用意されている submit 関数ついて説明します。
先ずは1個のテキスト入力と SUMIT ボタンを宣言したフォームをもつHTMLを以下に示します。 これは特に難しくは無いと思います。ちなみにアクション先の PHP のソースをその下に示します。■簡単なFormとSUBMITについて
<html> <head> <meta charset="utf-8"> <title>jquery submit</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <h1>jquery submit</h1> <form method="post" action="stest.php"> <input type="text" name="data1" value=""> <input type="submit" value="送信"> </form> </body> </html>
■アクション先のPHP
<?php $data1 = ""; if (isset($_POST["data1"]) == true) { $data1 = $_POST["data1"]; } // データを表示 echo("data1=".$data1); ?>
ここで jQuery の submit 関数を導入します。 submit 宣言で無名関数を宣言しています。 この無名関数はアラート表示を行っていますが、アラートが表示されて「OK」ボタンを押下すると上記の stest.php のプログラムに遷移します。
■submit 関数
<html> <head> <meta charset="utf-8"> <title>jquery submit</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <h1>jquery submit</h1> <form method="post" action="stest.php"> <input type="text" name="data1" value=""> <input type="submit" value="送信"> </form> <script type="text/javascript"> // jquery でSUBMIT処理 $('form').submit(function(){ alert("送信します。"); return true; }); </script> </body> </html>
この処理はそこまで必要は感じられませんが無名関数の最後で return false; とすれば SUBMIT 処理が中断します。
つまりこの関数の中で入力データの必須チェック等を行うことで正しいデータをアクション先に送信できます。 では、テキストボックスにデータが入力されていない場合にエラー表示をする様にします。
■submit 関数の中でチェック処理を行いエラーの場合 return false;
<html> <head> <meta charset="utf-8"> <title>jquery submit</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <h1>jquery submit</h1> <form id="SForm" method="post" action="stest.php"> <input type="text" id="data1" name="data1" value=""> <input type="submit" value="送信"> </form> <script type="text/javascript"> // jquery でSUBMIT処理 $('form').submit(function(){ if ($('#data1').val() == '') { alert("データを入力して下さい。"); return false; } alert("送信します。"); return true; }); </script> </body> </html>
ところで jQuery のプログラムからフォームを生成し非表示の input ボックスを追加し SUBMIT 処理を行う例を示します。
尚、コメントで囲まれた処理は jQuery ではなく JavaScript のみで記述した場合を示します。
■jQuery プログラムによるフォーム生成と SUBMIT 処理
<html> <head> <meta charset="utf-8"> <title>jquery submit2</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <h1>jquery submit2</h1> <button onclick="doSubmit();">送信</button> <script type="text/javascript"> // jquery でSUBMIT処理 function doSubmit() { // from オブジェクト var form = $("<form></form>").attr('method', 'post').attr('action', 'stest.php'); $('body').append(form); // input オブジェクト var inp = $("<input>"); inp.attr("type", "hidden").attr("name", "data1").attr("value", 123); // input オブジェクトをformに追加 form.append(inp); // SUBMIT処理 form.submit(); return false; /* // 純粋なJacaScriptでの記述 var form = document.createElement("form"); form.action = "stest.php"; form.method = "POST"; form.style.visibility = "hidden"; document.body.appendChild(form); var elem = document.createElement("input"); elem.name = "data1"; elem.type = "hidden"; elem.value = "123"; form.appendChild(elem); form.submit(); */ } </script> </body> </html>
-
今回は jQuery で用意されている append , appendTo , before , after 関数を使って要素の追加を行う方法について説明します。
■各関数の定義について
関数名 書式 引数 戻り値 append $.(セレクタ).append(content) セレクタ:追加対象要素を指し示す文字列
content:追加する文字列、DOM Elementおよび
jQueryオブジェクトjQueryオブジェクト appendTo $.(セレクタ).appendTo(content) セレクタ:追加する要素を指し示す文字列または、
追加文字列
content:追加対象要素を指し示す文字列
(セレクタ)jQueryオブジェクト before $.(セレクタ).before(content) セレクタ:追加対象要素を指し示す文字列
(実際はこのセレクタの外側の前方に追加)
content:追加する文字列、DOM Elementおよび
jQueryオブジェクトjQueryオブジェクト after $.(セレクタ).after(content) セレクタ:追加対象要素を指し示す文字列
(実際はこのセレクタの外側の後方に追加)
content:追加する文字列、DOM Elementおよび
jQueryオブジェクトjQueryオブジェクト
ここで注意するのは appendTo 関数で append とは逆の指定となり、 appendTo の引数(content)で指定されたセレクタの子要素の最後に $.(セレクタ) の「セレクタ」部分が追加されます。
また before , after 関数は指定されたセレクタの外側の前後へ、指定文字列等(content)が追加されます。
では実際の例を以下に示します。
■要素を追加する方法(append,appendTo,before,after)
<html> <head> <meta charset="utf-8"> <title>jquery append</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> var i = 1; // append による指定要素の最後にHTML文字列の追加 function doAppend() { $("#maindiv").append("<p>追加の要素(" + i + "):append</p>\n"); i++; // これを無くして上の「i」⇒「(i++)」でもOK return false; } // appendTo によりHTML文字列を指定要素の最後に追加 function doAppendTo() { $("<p>追加の要素(" + (i++) + "):appendTo</p>\n").appendTo("#maindiv"); return false; } // before による要素の追加 function doBefore() { $("#maindiv").before("<div>追加の要素(" + (i++) + "):before</div>\n"); return false; } // after による要素の追加 function doAfter() { $("#maindiv").after("\n<div>追加の要素(" + (i++) + "):after</div>"); return false; } </script> </head> <body> <h1>jquery append</h1> <div id="maindiv"> </div> <button onclick="doAppend();">append</button> <button onclick="doAppendTo();">appendTo</button> <button onclick="doBefore();">before</button> <button onclick="doAfter();">after</button> </body> </html>
上記のソースを実行し、「append」ボタンを2回押下後、「appendTo」「before」「after」ボタンを順に押下すると、HTML内のソースは以下の様になります。<h1>jquery append</h1> <div>追加の要素(4):before</div> <div id="maindiv"> <p>追加の要素(1):append</p> <p>追加の要素(2):append</p> <p>追加の要素(3):appendTo</p></div> <div>追加の要素(5):after</div>
上記では appendTo 関数は追加処理と説明しましたが、実は移動処理が本当の処理なのです。
「$.(セレクタ).appendTo」のセレクタの中がHTMLのDOMのなかで、存在しないものであれば、その文字列そのものを追加処理し、 存在するセレクタであればそれ自身を移動します。
それでは、以下のソースを見て下さい。
■appendToについて
<html> <head> <meta charset="utf-8"> <title>jquery append2</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> // appendTo によりHTML文字列を指定要素の最後に追加 function doAppendTo1() { $("<p>追加の要素:appendTo</p>\n").appendTo("#maindiv"); return false; } // appendTo によりセレクタで指定されたHTML文字列を指定要素の最後に移動 function doAppendTo2() { $("#padd").appendTo("#maindiv"); return false; } </script> </head> <body> <h1>jquery append2</h1> <p id="padd">「id=padd」の行</p> <div id="maindiv"> <p>「id=maindiv」の中の最初の行</p> </div> <button onclick="doAppendTo1();">appendTo1</button> <button onclick="doAppendTo2();">appendTo2</button> </body> </html>
「appendTo1」ボタンを押下すると常に「<p>追加の要素:appendTo</p>」が追加され、 「appendTo2」ボタンを押下すると「id="padd"」の行が追いかける様に最後の行に移動するのが分かると思います。
appendTo 関数は子要素の最後に移動しますが、先頭に追加するには prependTo 関数があります。 また append 関数に対しては prepend 関数があります。