2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
ボタンを押したら要素を追加したい、WordPressの記事のようなHTMLを直接触ることができないコンテンツにspan
タグを追加したいということもあると思います。
そんな時に便利なjQueryでDOMを操作し、要素を追加する方法(メソッド)をご紹介いたします!
目次
テキストを追加する場合はメソッドの後ろの(”)の中に追加したいテキストを記述します。
HTMLタグで囲まれずにテキストだけが反映されるため、追加先の指定には注意が必要です。
$(function() {
$('.text').click(function(){
$('.text').before('テキストが追加されました!');
});
});
See the Pen by spiqa design (@spiqa_design) on CodePen.
※右下の「Rerun」ボタンを押すとリセットできます。
HTMLのタグを追加する場合はテキストを入力した箇所にHTMLのタグを入力します。
下記の例では追加されているのがわかりやすくなるようにbutton
タグを追加していますが、<p>
や<div>
、<li>
と書くことで空の要素を追加することができます。
$(function() {
$('.text').click(function(){
$('.text').before('<button>');
//空のpタグを出す場合は$('.text').before('<p>');になります。
});
});
See the Pen by spiqa design (@spiqa_design) on CodePen.
※右下の「Rerun」ボタンを押すとリセットできます。
また、空のタグだけでなくHTMLのコンテンツとしてテキストや要素一式をまとめて追加することも可能です。
$(function() {
$('.text').click(function(){
$('.text').before('<div class="area"><p>要素が<br><span>追加されました!!</span></div>');
});
});
See the Pen by spiqa design (@spiqa_design) on CodePen.
※右下の「Rerun」ボタンを押すとリセットできます。
.before()
を使うことで指定した要素の前に要素を追加することができます。
HTMLのタグだけでなく、テキストをそのまま追加することも可能です。
See the Pen bGBOrYe by spiqa design (@spiqa_design) on CodePen.
※右下の「Rerun」ボタンを押すとリセットできます。
<div>
<p>テキストが追加されました!</p>
<p class="text">ここをクリックすると<br>前に要素が追加されます</p>
</div>
.after()
を使うことで指定した要素の後に要素を追加することができます。.before()
同様にHTMLのタグだけでなく、テキストをそのまま追加することができます。
See the Pen PobXJQK by spiqa design (@spiqa_design) on CodePen.
※右下の「Rerun」ボタンを押すとリセットできます。
<div>
<p class="text">ここをクリックすると<br>前に要素が追加されます</p>
<p>テキストが追加されました!</p>
</div>
.prepend()
を使うことで指定した要素の中の先頭に子要素を追加することができます。.before()
/.after()
同様にHTMLのタグだけでなくテキストを追加することもできます。
先ほどまでの例に背景色と、一番前、一番後ろのテキストを追加して記述方法をご紹介いたします。
See the Pen KKNbXeG by spiqa design (@spiqa_design) on CodePen.
※右下の「Rerun」ボタンを押すとリセットできます。
<div class="wrap">
<p>テキストが追加されました!</p>
<p>一番前の要素</p>
<p class="text">ここをクリックすると<br>先頭に要素が追加されます</p>
<p>一番後ろの要素</p>
</div>
.append()
を使うことで指定した要素の中の一番最後に子要素を追加することができます。.prepend()
同様にHTMLタグだけでなくテキストを追加することもできます。
See the Pen oNYOBBX by spiqa design (@spiqa_design) on CodePen.
※右下の「Rerun」ボタンを押すとリセットできます。
<div class="wrap">
<p>一番前の要素</p>
<p class="text">ここをクリックすると<br>先頭に要素が追加されます</p>
<p>一番後ろの要素</p>
<p>テキストが追加されました!</p>
</div>
追加をするだけでなく、削除をすることも可能です。
下記の例のように.remove()
を使うことで指定した要素を削除することができます。
See the Pen MWbZOYN by spiqa design (@spiqa_design) on CodePen.
※右下の「Rerun」ボタンを押すとリセットできます。
<div class="wrap">
<p class="text">ここをクリックすると<br>下のテキストが消えます</p>
</div>
ここまでは要素を追加する方法をご紹介しましたが、次は要素を囲む方法をご紹介します。.wrap()
を指定すると、指定した要素を囲むタグを追加することができます。
See the Pen JjbwOGb by spiqa design (@spiqa_design) on CodePen.
※右下の「Rerun」ボタンを押すとリセットできます。
<div class="wrap">
<p class="text">ここをクリックすると<br>divタグが追加されます</p>
</div>
.wrap()
とは逆の動きで、指定した要素を囲んでいるタグを削除することができます。
See the Pen oNYJozw by spiqa design (@spiqa_design) on CodePen.
※右下の「Rerun」ボタンを押すとリセットできます。
<p class="text">ここをクリックすると<br>divタグが消えます</p>
使う機会が少ないメソッドではありますが、知っているとふとした時に役に立つメソッドです!ぜひご活用ください!
関連記事はこちら
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design