初心者向けjQuery入門

初心者向けjQuery入門講座です

未分類

jQuery beforeとafterの違いと要素の追加

投稿日:2017年8月12日 更新日:

jQuery beforeとafterの違いと要素の追加

jQuery beforeとafterの違い

beforeとafterは基本的な動作は似てます。
共通してるのは要素を追加することです。
違うのは挿入場所だけですね。

あれ、同じこと昨日の記事で書いたような気がします。

jQuery prependとappendの違いと要素の追加

prependとappendとタグを使用して要素を追加するだけなら同じ動作します。

じゃあいらないじゃん。

細かい動作は違うんです。

具体的には文字列を指定した場合が動作が違います。

jQuery before 前に要素の追加

before は英語で前にという意味です。

サンプル
$(“セレクタ”).before(“タグや文字列”)

サンプル

<html>
<head>
<script src=”jquery-3.2.1.js”></script>

<script>
$(document).ready(function(){

$(“.red”).before(“<h3>pink</h3>”)

 

});
</script>
<title>

</title>
</head>
<body>
<div>
<h3 class=”red”>red</h3>
<h3>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</div>

</body>
</html>

実行結果は

pink

red

Green

yellow

Blue

ちゃんとredの前に挿入されましたね。

問題は文字列ですね。

サンプル

<html>
<head>
<script src=”jquery-3.2.1.js”></script>

<script>
$(document).ready(function(){

$(“.red”).before(“pink”)

 

});
</script>
<title>

</title>
</head>
<body>
<div>
<h3 class=”red”>red</h3>
<h3>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</div>

</body>
</html>

実行結果は

pink

red

Green

yellow

Blue

になります。

見た目は文字にすると同じですが

タグで指定していないので何もタグのない文字列が表示されています。

prependと文字列を指定した時に動作が違うといいました。

prependの場合は文字列だと指定したタグの先頭に文字列が追加されます。

pinkredみたいな感じです。

jQuery after 後に要素の追加

before は英語で後にという意味です。

サンプル
$(“セレクタ”).after(“タグや文字列”)

 

サンプル

<html>
<head>
<script src=”jquery-3.2.1.js”></script>

<script>
$(document).ready(function(){

$(“.red”).after(“<h3>pink</h3>”)

 

});
</script>
<title>

</title>
</head>
<body>
<div>
<h3 class=”red”>red</h3>
<h3>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</div>

</body>
</html>

実行結果は

red

pink

Green

yellow

Blue

です。

文字列の場合も見た目は同じです。

pinkだけタグのない文字列になってしまいます。

 

 

 

 

スポンサードリンク




スポンサードリンク




-未分類
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

jQuery mouseoverとmouseoutマウスイベントの方法

Query mouseoverとmouseoutマウスイベントの方法 Query mouseoverマウスを乗せた時のイベントの方法 mouseoverはマウスを要素に乗せた時に発生するイベントです。 …

no image

jQuery メソッドチェーンとメソッドの種類の使い方

jQuery メソッドチェーンとメソッドの種類の使い方 jQuery メソッドの種類の使い方 メソッドは何らかの処理を実行するためにあります。 $(“セレクタ”).メソッド(パ …

no image

jQuery widthとheight要素の横と縦を設定する

jQuery widthとheight要素の横と縦を設定する jQuery width 要素のサイズの横幅を設定するにはwidthメソッドを使用します。 $(“セレクタ”).w …

no image

jQuery parentとchildren親と子要素を取得する

Query parentとchildren親と子要素を取得する Query parent 親要素を取得する parentは指定した要素の親要素を取得します、 サンプル $(“セレクタ&#8 …

no image

jQuery 複数のcssのプロパティの設定の方法

jQuery 複数のcssのプロパティの設定の方法 jQuery 複数のcssのプロパティの設定の方法 jQueryでcssを複数設定の方法。 メソッドチェーンで書くとこんな感じになります。 $(&# …