見出し画像

jQuery徹底入門② 要素の追加・削除とテキスト操作をマスターしよう

スキプラ＠元エンジニア

はじめに

今回は、要素の追加・削除とテキストボックスの中身を操作する方法をマスターしていきます。最終的なゴールとしてチャットを作っていきます。

※ チャットは次回の講座で完成させます。今回はそれに必要な事前知識をインプットします。

チャット！？難しそう！と思ったあなた。ご安心ください。こんな感じのチャットを、「テキストボックスの中身を取得」と「要素の追加」この2つで実現できます。ワクワクしますよね！？

では行きましょう！！

Step1: 要素を追加する方法をマスターする

要素を追加する方法として次の8個はマスターしておきましょう。
忘れたらまたここに戻ってきて下さい。

1. append - 要素の最後に追加する
2. appendTo - 要素の最後に追加する
3. prepend - 要素の先頭に追加する
4. prependTo - 要素の先頭に追加する
5. after - 要素の次に追加する
6. insertAfter - 要素の次に追加する
7. before - 要素の前に追加する
8. insertBefore - 要素の前に追加する

これを見てなんか違和感を感じませんか？
「要素を先頭に追加する」とか、「要素を最後に追加する」とか、全部やってることは同じなのに、2つずつメソッドがありますよね？
これは、主語と目的が逆になるってだけです。図解で説明します。

スクリーンショット 2020-06-13 18.17.38


appendメソッドは、セレクターに対して、appendで追加する要素を書いていきます。
逆に、appendToは、追加する要素に対して、セレクターを書いていきます。

スクリーンショット 2020-06-13 18.18.43


つまり、「何を」「どこに」がappendと、appendToで逆転するってだけです。他のもすべて同じです。
まぁどっちをつかっても結果は同じでこうなります。

スクリーンショット 2020-06-13 18.27.16


じゃあ8種類をそれぞれ見ていきましょう。一応サンプルを用意したので、どんな感じで要素が追加されていくのか見ておいてください。

1. append()  - 要素の最後に追加する

まずはappendです。これは要素の最後に追加する時に使います。

LINEとかで、何か入力して「送信」を押したら自分のメッセージが最後に表示されますよね。あんなイメージです。う〜ん、プログラミングが楽しくなりそうですね！

HTMLを用意してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>要素の追加</title>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
 <button>要素の最後に追加する</button>
 <div>
   <p>最初からあるよ</p>
   <p>最初からあるよ</p>
 </div>
</body>
</html>

スクリーンショット 2020-06-14 01.44.10

こんな感じですね。この「最初からあるよ」の後にjQueryを使って要素を追加していきましょう。
早速jQueryを書きます。
bodyタグの最後にこちらを追加してください。

<script type="text/javascript">
 $(function() {
   // ボタンがクリックされたら
   $('button').on('click', function() {
     // divの最後にpタグを追加する
     $('div').append('<p>追加されたよ</p>')
   })
 })
</script>

ボタンを押してみましょう。ちゃんと要素が追加されてるのが分かります。

スクリーンショット 2020-06-14 01.45.11

2. appendTo() - 要素の最後に追加する

結果は全く同じになりますが、appendが追加する対象の要素(今回はdiv)に対して使っていたのに対して、appendToは追加したい要素(pタグのDOM要素)に対して、どこに追加するか？を引数に与えます。

スクリーンショット 2020-06-13 18.18.43

こうですね。
実際に書いてみるとこんな感じになります。

<script type="text/javascript">
 $(function() {
   // ボタンがクリックされたら
   $('button').on('click', function() {
     // divの最後にpタグを追加する
     $('<p>追加されたよ</p>').appendTo($('div'))
   })
 })
</script>

動きとしてはappnedと同じです。

3. prepend() - 要素の先頭に追加する

じゃあ、先頭に追加するのも学んでおきましょう。これもシンプルです。

<script type="text/javascript">
 $(function() {
   // ボタンがクリックされたら
   $('button').on('click', function() {
     // divの先頭にpタグを追加する
     $('div').prepend('<p>追加されたよ</p>')
   })
 })
</script>

4. prependTo() - 要素の先頭に追加する

こちらもappendと同じ仕組みですね。メソッドを使うオブジェクトと引数が変わります。

<script type="text/javascript">
 $(function() {
   // ボタンがクリックされたら
   $('button').on('click', function() {
     // divの先頭にpタグを追加する
     $('<p>追加されたよ</p>').prependTo($('div'))
   })
 })
</script>

5. after() - 要素の次に追加する

この要素の「次」というのはどういうことでしょうか？少し分かりづらいですよね。

実際にやってみましょう。

<script type="text/javascript">
 $(function() {
   // ボタンがクリックされたら
   $('button').on('click', function() {
     // divの次にpタグを追加する
     $('div').after('<p>追加されたよ</p>')
   })
 })
</script>

スクリーンショット 2020-06-14 01.52.47


あれ？appendと何が違うんでしょうか？こんなときはディベロッパーツールでソースを覗いてみましょう。

スクリーンショット 2020-06-14 01.53.37

appendは、divの中の最後に追加してましたが、afterでは、divの次(隣)にpタグが追加されていってるのが分かります。
例えば、自分で見た動画や画像にタグをつけるサービスがあったとき、入力ボックスにタグ名を入れて、Enterを押すと入力ボックスの横にタグ名が追加されるような時を想像してみてください。

この時、入力ボックスの【隣】に要素を追加したいですよね。そんな場合に使います。
↓ こんなイメージですね。

スクリーンショット 2020-06-14 02.08.21

一応このコードも書いておきますね。ちょっとイメージが湧いてきましたね。ワクワクしますね！！

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>タグの追加</title>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<style>
 // タグを見やすく表示する
 span {
   border: 1px dotted #ddd;
   padding: 10px 5px;
   margin: 0 10px;
 }

</style>


<body>
 <input id="text" type="text" name="" placeholder="タグ名を入力してね">
<script type="text/javascript">
 $(function() {
   // テキストボックスでキーボードが押された時
   $('#text').on('keypress', (e) => {
　　　// そのキーがEnterキーだったら
     if (e.which == 13) {
       // テキストボックスの後にspanでタグ名を追加する
       $('#text').after(`<span>#${$('#text').val()}</span>`)
     }
   })
 })
</script>

</body>
</html>

6. insertAfter() - 要素の次に追加する

さて、insertAfterも同じです。今回のafterと対象が逆転するだけです。
意味合い的にも、要素の後に差し込む。って感じですよね。

<script type="text/javascript">
 $(function() {
   // ボタンがクリックされたら
   $('button').on('click', function() {
     // divの次にpタグを追加する
     $('<p>追加されたよ</p>').insertAfter($('div'))
   })
 })
</script>

7. before()  - 要素の前に追加する

beforeとinesrtBeforeも、after/insertAfterと似てます。要素の【前】に追加する形になります。

<script type="text/javascript">
 $(function() {
   // ボタンがクリックされたら
   $('button').on('click', function() {
     // divの前にpタグを追加する
     $('div').before('<p>追加されたよ</p>')
   })
 })
</script>

今回もソースを覗いてみましょう。

スクリーンショット 2020-06-14 02.13.33

うん。divの【前】にpタグが追加されてますね。

8. insertBefore() - 要素の前に追加する

こちらも一緒なのでサクッと行きましょう。

<script type="text/javascript">
 $(function() {
   // ボタンがクリックされたら
   $('button').on('click', function() {
     // divの前にpタグを追加する
     $('<p>追加されたよ</p>').insertBefore($('div'))
   })
 })
</script>

Step2: 要素を削除する

要素の削除は非常に簡単です。「removeメソッド」を使うだけです。
でも実は「何を削除する？」というのが難しかったりします。

まずは単純な例を見てみましょう。

スクリーンショット 2020-06-14 02.20.18

テキストと削除ボタンだけがあります、「削除」ボタンを押したら「テキストテキスト」が削除されるようにしてみましょう。

スクリーンショット 2020-06-14 02.22.09


今回は、ボタンが押されたら、pタグを削除すればOKなので簡単ですね

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>要素の削除</title>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<style>
 /* 削除ボタンっぽく見せる */
 span {
   padding: 20px 10px;
   background: red;
   color: #fff;
   font-weight: bold;
   border-radius: 10px;
   margin-left: 10px;
 }
</style>
<body>
 <div>
   <p>テキストテキスト<span>削除</span></p>
 </div>
<script type="text/javascript">
 $(function() {
   // ボタンがクリックされたら
   $('span').on('click', function() {
     $('p').remove()
   })
 })
</script>

</body>
</html>

こんな感じで、削除ボタンのspan要素をクリックしたら、pタグを消せばOKです。

あれ？ちょっとまってください。これ、pタグが複数あったらどうなるんでしょうか？

5個並べます。削除ボタンを押してみましょう。

スクリーンショット 2020-06-14 02.24.21


一番上のテキストを消すために「削除ボタンをクリックじゃーーーー！！」

スクリーンショット 2020-06-14 02.25.04

あれ？？全部消えたｗｗｗ
はい、重大インシデントです。障害報告書書いてください。笑

これ、なんで消えたか分かりますか？

そう。pタグをremoveする。としてるので、5個全部同じpタグを消しちゃう訳です。

でも本当にやりたいのって、「削除ボタン」を押した要素だけ消したいですよね？ね？

じゃあ理解度チェックのお時間ですｗ

理解度チェック① - 削除ボタンを押した要素のpタグだけ削除する

以下のコードを書いて、Twitterで#スキプラチャレンジを付けてツイートしてみてください。(※ 回答のコードはスクショとかでもOKです！必ずコメント返します)

自分が押した削除ボタン(spanタグ)を囲っているpタグだけをremoveしてください

↓ 正解のイメージ

ヒント① - JavaScriptを最初に学んだ時のnodeの概念を思い出してください

今回は、削除ボタンを押した時、spanタグの親(parentNode)のpタグが削除したい対象ですよね。

スクリーンショット 2020-06-03 21.47.44


ヒント② - ボタンをクリックした時、その要素自体を取得するには・・

この、click時の処理の中で、$(this)とすると、spanタグ自体の要素を表現しています。つまり、この$(this)というオブジェクト(変数と関数の入った家)の中に、親(parent)ノードにアクセスするメソッドが入ってるのです。

ちなみにjQueryの場合は、「parent()」とすると、その要素の親nodeの要素を返してくれます。

理解度チェック② - 削除ボタンの前の要素だけ消す

ちょっと難易度が上がります。

以下のコードを書いて、Twitterで#スキプラチャレンジを付けてツイートしてみてください。(※ 回答のコードはスクショとかでもOKです！必ずコメント返します)

自分が押した削除ボタン(spanタグ)の前の要素だけ削除してください。

さっきのタグを追加してく時、そのタグだけを削除するようなイメージですね。

↓ 正解のイメージ

ヒント① : 前後の要素を取得するには・・

prev() : 前の要素を取得
next() : 次の要素を取得

ヒント② : 肝心の削除部分以外のコードはこちら

<
!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>削除ボタンおした前の要素だけ消す</title>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<style>
 /* 削除ボタンっぽく見せる */
 span {
   padding: 5px 10px;
   background: red;
   color: #fff;
   font-weight: bold;
   border-radius: 10px;
   margin-left: 10px;
 }
</style>
<body>
 <b>#最高</b><span>x</span>
 <b>#稼げる</b><span>x</span>
 <b>#絶対オススメ!</b><span>x</span>
 <b>#詐欺じゃないの？</b><span>x</span>
<script type="text/javascript">
 $(function() {
   // ボタンがクリックされたら
   $('span').on('click', function() {
     // このボタンの前の要素を削除する処理を書く
   })
 })
</script>

</body>
</html>

ちょっとむずかしいかもしれませんが、ぜひチャレンジしてみてください！

Step3: テキストボックスから値を取得する

テキストボックスから値を作ってみましょう。
これができると、ユーザーが入力した値を画面に表示できるので、チャットも簡単に作れちゃいますね。

取得方法はかなり簡単です。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>テキストボックスの中身を取得する</title>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
 <input id="text" type="text" name=""><button>書き込む</button>
 <p></p>
<script type="text/javascript">
 $(function() {
   // ボタンがクリックされたら
   $('button').on('click', function() {
     $('p').text($('#text').val())
   })
 })
</script>

</body>
</html>

ボタンがクリックされた時に、予め用意されてたpタグのテキストを書き換えてます。

その時、テキストボックスの中身というのは「$('#text').val()」で取得しています。

スクリーンショット 2020-06-14 02.54.13


こんな形ですね。でもちょっと違和感ですね。
普通は書き込んだら、どんどん下に追加されていってほしいですもんね。

ってことは・・？理解度チェックのお時間ですｗ

理解度チェック③ - テキストボックスの中身をボタンが押されるたびに追加していく

先程の、afterと「$('#text').val()」の組み合わせです。

以下のコードを書いて、Twitterで#スキプラチャレンジを付けてツイートしてみてください。(※ 回答のコードはスクショとかでもOKです！必ずコメント返します)

「書き込む」ボタンを押したら、押す度にテキストボックスの中身がpタグとして追加されるようにしてください。

↓ 動作イメージ

次回予告

今回チャットまで作ろうと思ったのですが、かなり重たくなってしまったので、チャットは次回にします。

いよいよ次回、今回の要素の取得・削除と、テキストの中身を取得するのを組み合わせてチャットを作ってみます。面白いですよ〜！

最後にお願い

ぜひぜひ、今後のモチベーションのためにもお願いします！！

もしこのnoteが参考になったら....

■ 最後にたった2つのお願い
① このnoteを「スキ」してください 🙇‍♂️
サポートしてくれたら泣いて喜びます！直接DMでお礼させていただきます！！
② このnoteの感想、何でも良いので @riman_skillplus 宛にください 🙇‍♂️
次回は、jQueryを使ってテキスト(インプット要素)の値を取得して、チャットみたいなものを作ってみます。乞うご期待！


実践編で利用するための基礎編はすべて無料公開してます。 基礎編のモチベーション向上のためにサポートして頂けるとめちゃくちゃ喜びます！！ だいたい作業工数は1記事あたり4-5時間程度かけて【分かりやすい】【知識が身につく！】を意識して作っておりますので、今後も頑張っていきます！