system
高木 祐玖

2022.4.4システム開発 

システムエンジニア

高木 祐玖

2021年8月1日「マリンロード」は「インソースマーケティングデザイン」へ社名を変更いたしました

[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);
}

動作確認

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

<画面イメージ>
キャプチャ2
いかがだったでしょうか?
今後もjQueryに関する記事を投稿しますのでお楽しみに。

WEBサイト診断 現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
システム開発サービスはこちら
ページTOPへ