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だけタグのない文字列になってしまいます。
