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

関連記事

【jQuery/javascript】はてなボタンを動的に設置する

はてなブックマークのボタンをページの読み込みが終わった後にjavascript(jQuery)で追加

記事を読む

【javascript/jQuery】強制的にページをスクロールさせる方法

強制的にページをスクロールさせたいと思って調べていたのですが、なかなか思うようなものが見つからず困っ

記事を読む

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

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

記事を読む

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

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

記事を読む

javascriptにおけるfor文の書き方

1. for文とは ある条件が正しいときに処理を繰り返すというループを記述するための文です。 似

記事を読む

Canvasの画像をリサイズする簡単な方法【HTML5・javascript】

調べてみるとCanvasをリサイズするようなjavascriptの関数は存在しないようなので自前で作

記事を読む

【jQuery】hasClass is not a functionエラー

jQueryでセレクタを使って取得してきたjQueryオブジェクトからその子要素をchildrenで

記事を読む

WordPressの記事内でJavaScriptを動かす

WordPressでは厄介なことにJavaScriptが動かない場合があります。この記事では動かない

記事を読む

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

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

記事を読む

スクレイピングをサポートしてくれるAPI【kimono】

kimonoというスクレイピングをAPI化してくれるという素晴らしいサービスがあります。

記事を読む

【Unity】他のスクリプトを一括で取得して有効化・無効化を制御する

Unityを使っていて他のスクリプトを一時的に停止させたいと思ったので

テレビの録画をPCやNASで共有する

今までテレビはテレビ用のモニターで見ればいいやと思っていたのですが、さ

【DeepLearning】物体検出手法のSSD(Keras版)を試す (Ubuntu14.04)

はやりのディープラーニングの物体検出手法の一つであるSSDのサンプルを

【Laravel5】既存のDBからデータを取得して表示する

はじめに 今まで作ったWebサイトをLaravel5で見れるようにし

【C++/OpenCV】cv::Matの画像にインパルスノイズを付加する

OpenCVで画像にノイズを付け足したいと思って調べたところ、Pyth

Intel Corei7-7700TでHTC Viveの動作確認

はじめに HTC ViveというVRヘッドセットで遊んでみたのでその

【Python】フォルダ内のカッコ付き数字ファイルを一括でリネームするスクリプト

はじめに タイトルどおりなのですが、指定フォルダ内のファイルのファイ

→もっと見る

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