こんにちは。
本日はappendメソッドを用いて要素を追加する方法を、共有したいと思います。
それでは、以下手順となります。

Viewを作成する

templates/Test/の中にtest.phpを作成し、表を用意します。

<table border="1" id="appendArea">
　　<tr>
　　　　<th>行を追加してみよう!!</th>
　　</tr>
</table>

<?php echo $this->Form->button('追加', array('type' => 'button', 'onClick'=>'return test();'));?>

 

<画面イメージ>

スクリプトを作成する

webroot/js/の中にtest.jsを作成します。
「追加」ボタンがクリックされたときに、指定した要素内の最後に引数のstrHtmlが追加されます。

function test() {
　　// html要素を作成
　　var strHtml = '';
　　strHtml = strHtml + '<tr>';
　　strHtml = strHtml + ' <td>行が追加されました！</td>';
　　strHtml = strHtml + '</tr>';

　　// 指定した位置にhtml要素をセット
　　$('#appendArea').append(strHtml);
}

動作確認

「追加」ボタンをクリックし、「行が追加されました！」
が表示されれば成功です。

<画面イメージ>

いかがだったでしょうか？
今後もjQueryに関する記事を投稿しますのでお楽しみに。