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;
}
スポンサーリンク
  • このエントリーをはてなブックマークに追加

関連記事

WordPressサイトのSSL対応(HTTPS化)手順のまとめ【さくらサーバー】

先週頃にこのサイトをSSL対応しましたのでその流れについてまとめておき

【Google Charts】動的にグラフを更新する方法

はじめに Webサイト上でグラフを描こうと思った場合、いくつかのJa

体重変化量計算シミュレータ【ダイエット/肥満】

ツール本体 入力 カロリー入力 1日の余剰摂取/消費カロリー

おサイフケータイ対応ストレージ32GBのSIMフリースマホまとめ【2017年秋版】

はじめに SIMフリーの格安スマホのおサイフケータイ機能付きのもので

リクルート期間限定ポイントの有効な使い道

はじめに  先日クレジットカードの見直し活動の一環でポイント還元率の

初心者がお金を貯めるための節約・財テク手法まとめ【ポイント還元・投資・税金対策】

はじめに  最近なるべく節約しようと思い、お金周りに関して色々調べて

動画講座を効率的にキャプチャして復習する方法

はじめに  最近、動画媒体の講座などをたまに視聴しています。独学だと

→もっと見る

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