【プロが教える!!】DOM操作の基本『after・before・append』の使い方

超便利!jQreryの基本 DOM操作!

WordPressのテンプレートタグや、自動生成されてしまってタグをカスタマイズ出来ない時があります。
でも最初からプログラムを書いていると時間と手間が… という時には、指定した要素の前や後ろ、子要素の前や後ろ、といった様にhtmlタグで要素を追加せずにjQueryのメソッドを使用して要素を追加することが出来ます。

htmlファイル

この様に記述した場合、
<ul class="taxonomy_list"></ul>
の子要素
<li>ここにリスト</li>
の最後に
<nav id='side_pager'><a class='prev'><前へ</a> | <a class='next'>次へ></a></nav>
が追加されます。よって出力されるhtmlコードは

となります。この方法を利用すれば、htmlを直接加えることなく効率よくコードを書き換えていけます。
この操作のことをDOM(document Object Model)操作といい表示されたWebサイトを動的に書き換える方法です。

 DOM操作メソッド一覧

最後まで読んでくれたアナタへ

この記事を最後まで読んでくれてありがとうございます。

私も昔はjQueryが苦手でした。

でもこのDOM操作を切り口にjQueryの便利さとプログラムの面白さに目覚めていきました。

phpとjQueryをある程度覚えれば、WEBのフロントエンドで出来ないことはほぼ無いと自負しています。

このDOM操作から、アナタのWEBの世界が開花していきますように。

投稿者:気まぐれWEBLOG管理人