勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

jQueryのappendとprepend

      2014/05/17

よく忘れるのでメモ。

■append(後ろに足す)
http://semooh.jp/jquery/api/manipulation/append/content/

■prepend(前に足す)
http://semooh.jp/jquery/api/manipulation/prepend/content/

■ソース
<html lang="ja">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
$(document).on('click', '#append,#prepend', function(){
if ($(this).attr('id') == 'append') {
$('#hoge').append('append!');
} else {
$('#hoge').prepend('prepend!');
}
});
});
</script>
</head>
<body>
<div id="hoge">hoge</div><br />
<input type="button" id="append" value="append">
<input type="button" id="prepend" value="prepend">
</body>
</html>

■サンプル

 - jQuery

  関連記事

jquery_logo
jQuery.browser~みたいなエラーが出た

jQueryのプラグインを使っていて1.9以降だと「jQuery.browser ...

jquery_logo
jquery.snipeの使い方

使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...

images
PHPとajaxでチャットの作成

■ソース ・index.php <? error_reporting(E_ ...

jquery_logo
画像をサムネイル⇔クリックで拡大(lightbox)

画像をサムネイル表示してクリックしたら大きく表示する というのがlightbox ...

jquery_logo
テキストエリアのリアルタイムプレビュー

テキストエリア内に書いた内容をリアルタイムで プレビューする機能が必要となり、教 ...

jquery_logo
jQueryで画像を遅延ロードする(jquery.lazyload.js)

画像を遅延ロードさせたい時にはlazyloadが便利。 ■ダウンロード http ...

images
imgタグとPHPでグラフ作成

プラグインやライブラリを使わずにグラフを作る 機会があったのでメモ。 ■サンプル ...

jquery_logo
jQueryで偶数or奇数行にclassを付与

やりたかった事は、 ・PHPは使えなくてjavascriptかjQueryを使用 ...

jquery_logo
Ajaxで負荷軽減

業務中、専用のページでfile_get_contents的なものは あまり使わな ...

jquery_logo
tableのフィルター機能

jQueryのプラグインで簡単にフィルター機能が つけられたのでメモ。 ■必要な ...