システムエンジニア
Yuki Takagi
2022.04.04 システム
[jQuery] appendメソッドを用いて要素を追加してみよう。
こんにちは。
本日は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に関する記事を投稿しますのでお楽しみに。
