jQueryで要素にappendとafterを使って追加する

公開日: : 最終更新日:2014/08/14 JavaScript/jQuery

スポンサーリンク

jqueryのappendは要素の末尾に指定要素を追加し、afterは要素の後に指定要素を加えます。いずれのメソッドも引数はDOM要素、jQueryオブジェクトなどが入ります。

以下両方のメソッドを使った比較サンプル。

<script type="text/javascript">
<!--
$(function(){
 var test1 = $("<div>").attr("id","test1").text("append1");
 var test2 = $("<div>").attr("id","test2").text("append2");
 var test3 = $("<div>").attr("id","test3").text("after");
 $("#test").append(test1);
 $("#test").append(test2);
 $("#test").after(test3);
});
-->
</script>
#test

idがtestの要素にappendを使ってidがtest1、同じくidがtest2の要素を加え、そののち、idがtest3の要素をafterを使ってtestの後に追加を行いました。

appendは要素の末尾に、afterは要素の後尾に追加されることが確認できました。

※上記のCSS

#test{
 background-color: red;
 width: 110px;
 height: 130px;
 padding: 10px 0 0 10px;
 margin: 0;
}
#test1{
 background-color: green;
 width: 100px;
 height: 40px;
 margin: 0 0 10px 0 ;
}
#test2{
 background-color: yellow;
 width: 100px;
 height: 40px;
}
#test3{
 background-color: orange;
 width: 120px;
 height: 120px;
 margin: 5px 0 0 0;
}
スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

【javascript】privateのメソッドからpublicなメンバを呼ぶ

javascriptでのクラス定義 javascriptではいわゆる正確なクラスは作れませんが、そ

記事を読む

チェスボード画像自動生成ツール

1マスのサイズ(ピクセル) マスの数× 左上が白 枠をつけるか 枠の色白黒

記事を読む

【javascript】RGB⇔カラーコード変換ライブラリ

RGBをカラーコードに変換、または、カラーコードをRGBに変換したい場合が出てきたのでどういうも

記事を読む

【Javascript】1つまたは複数のランダムな値を取得する

#shuffle1btn,#shuffle2btn{ padding: 4px 6px; }

記事を読む

monacaでWebサイトをアプリ化

monacaを使ってWebサイトをアプリ化するための叩き台としてのメモです。 Webサイトのア

記事を読む

【javascript】RSSを読み込んで表示させる【Google Feed API】

jQueryで簡単にRSSフィードを表示させる方法としてGoogleFeedAPIを利用するというの

記事を読む

【javascript】正規表現文字置換簡易ツール

jQueryで作成した正規表現による文字抽出用スクリプトです。 (使い方) 「正規表

記事を読む

jThree.jsやThree.jsでcanvasの画面をキャプチャして画像にする方法

WebGLのライブラリであるThree.jsやそのラッパーライブラリのjThree.jsでcanva

記事を読む

tableデータから棒グラフを描画できるjQueryプラグインTableBarChartを使ってみる

グラフを作成することについて 既存のtableデータから簡単に棒グラフの作成できるTableBar

記事を読む

jQueryのカラーピッカーライブラリFarbtastic Color Pickerを使う

.farbtastic .wheel { background: url(http://mem

記事を読む

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑