超便利！jQreryの基本 DOM操作！
WordPressのテンプレートタグや、自動生成されてしまってタグをカスタマイズ出来ない時があります。
でも最初からプログラムを書いていると時間と手間が… という時には、指定した要素の前や後ろ、子要素の前や後ろ、といった様にhtmlタグで要素を追加せずにjQueryのメソッドを使用して要素を追加することが出来ます。
htmlファイル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul class="taxonomy_list"> <li>ここにリスト</li> <li>ここにリスト</li> <li>ここにリスト</li> <li>ここにリスト</li> <li>ここにリスト</li> </ul> <script> $(function(){ $("<nav id='side_pager'><a class='prev'>＜前へ</a> | <a class='next'>次へ＞</a></nav>").appendTo("ul.taxonomy_list"); }); </script> |
<ul class="taxonomy_list"></ul>
の子要素<li>ここにリスト</li>
の最後に<nav id='side_pager'><a class='prev'>＜前へ</a> | <a class='next'>次へ＞</a></nav>が追加されます。よって出力されるhtmlコードは
|
1 2 3 4 5 6 7 8 |
<ul class="taxonomy_list"> <li>ここにリスト</li> <li>ここにリスト</li> <li>ここにリスト</li> <li>ここにリスト</li> <li>ここにリスト</li> <nav id='side_pager'><a class='prev'>＜前へ</a> | <a class='next'>次へ＞</a></nav> </ul> |
この操作のことをDOM（document Object Model）操作といい表示されたWebサイトを動的に書き換える方法です。
DOM操作メソッド一覧
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
$("div.box").after("<div>…</div>") CLASS名 box が指定されたdivタグの後に<div>…</div>を追加 $("<div>…</div>").insertAfter("div.box") <div>…</div>をCLASS名 box が指定されたdivタグの後に追加 $("div.box").before("<div>…</div>") CLASS名 box が指定されたdivタグの前に追加 $("<div>…</div>").insertBefore("div.box") <div>…</div>をCLASS名 box が指定されたdivタグの前に追加 $("div.box").append("<div>…</div>") CLASS名 box が指定されたdivタグの子要素の最後に<div>…</div>を追加 $("<div>…</div>").appendTo("div.box") <div>…</div>をCLASS名 box が指定されたdivタグの子要素の最後に追加 $("div.box").prepend("<div>…</div>") CLASS名 box が指定されたdivタグの子要素の最初に<div>…</div>を追加 $("<div>…</div>").prependTo("div.box") <div>…</div>をCLASS名 box が指定されたdivタグの子要素の最初に追加 $("div.box").wrap("<div>…</div>") CLASS名 box が指定されたdivタグを<div>…</div>をで包み込む (複数ある場合は各それぞれを包み込む) $("div.box").wrapAll("<div>…</div>") CLASS名 box が指定されたdivタグすべてを<div>…</div>をで包み込む (複数ある場合はすべてを一つに包み込む) $("div.box").wrapInner("<div>…</div>") CLASS名 box が指定されたdivタグの子要素を<div>…</div>をで包み込む $("div.box").clone().appendTo("div.boxA") 「$("div.box").clone()」でCLASS名 box が指定されたdivタグを複製 「appendTo("div.boxA")」で複製したものを、CLASS名 boxA が指定されたdivタグの子要素の最後に追加 $("div.box").replaceWith("<div>…</div>") CLASS名 box が指定されたdivタグを<div>…</div>に入れ替える $("div.box").remove() CLASS名 box が指定されたdivタグを削除（中身もすべて） |
最後まで読んでくれたアナタへ
この記事を最後まで読んでくれてありがとうございます。
私も昔はjQueryが苦手でした。
でもこのDOM操作を切り口にjQueryの便利さとプログラムの面白さに目覚めていきました。
phpとjQueryをある程度覚えれば、WEBのフロントエンドで出来ないことはほぼ無いと自負しています。
このDOM操作から、アナタのWEBの世界が開花していきますように。