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

関連記事

HTC__03

【Three.js/jThree.js】カメラ内部パラメータを変更して視野などを変える

jThree.jsでカメラの内部パラメータを変更するのに手間取ったのでメモ。参考にしているjThre

記事を読む

nc23924

ニコニコ動画の外部プレイヤーを動的に設置する【javascript/jQuery】

ニコニコ動画の外部プレイヤーはページのはじめの読み込みのときにしか表示されず、javascriptで

記事を読む

カメラシミュレータサンプル

【3DCG・MMD】カメラレンズによる見え方シミュレータ作成について

カメラのレンズが違うことでどのくらい出来上がる写真に差が出てくるのかを確かめることのできるシミュレー

記事を読む

jquery-icon

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

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

記事を読む

_rtm0919_tp_v

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

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

wmn0133-001

【jquery】iframe内のスクロールイベント設定とスクロール量取得

ページ内に設置したiframeのスクロールイベントおよびスクロール量を取得したかったのでメモ

記事を読む

application-javascript

【javascript】正規表現文字抽出簡易ツール

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

記事を読む

progressbar_sample

【javascript/jQuery】Progressbarで処理の進捗状況を表示する

jQuery UIでProgressbarを使う 処理経過を表示する場合プログレスバーにより提示さ

記事を読む

51R1yxTfoLL._AA180_

AAアニメーション

javascriptでAAアニメーションしました。AAは以下のところから参照しました。(AAアニメー

記事を読む

Color Picker

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

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

記事を読む

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

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

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

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

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

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

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

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

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

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

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

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

TAKEBE055122558_TP_V
寝る前にスマホを見ると斜視になる可能性とその対策

はじめに  寝る前などスマホを横になりながら見続けると斜視になる可能

→もっと見る

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