BLOGスタッフブログ

[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に関する記事を投稿しますのでお楽しみに。

高木 祐玖が書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します