初めに
今回の記事ではAjaxを用いたアプリケーション作成を行った際に多用したjQUeryでの要素追加、削除の方法を復習も兼ねて
簡単にまとめていこうと思います。
1 要素追加
アプリケーション作成の際に要素追加で用いたのは下記の4つです
$(a).append(`HTML要素`);
$(a).prepend(`HTML要素`);
$(a).after(`HTML要素`);
$(a).before(`HTML要素`);
基本的な使い方を説明するとコードのaの箇所にはclass名、id名、タグ（div、pなど）を入れて要素をどこに追加するのかを指定します。
具体的な使い方としては下記の通りです。
<body>
<ul class="name">
<li>佐藤さん</li>
<li>田中さん</li>
<li>加藤さん</li>
</ul>
<script>
$(".name").apppend(`<li>渡辺さん</li>`);
</script>
</body>
上記のようなコードを書くことによって<li>加藤さん</li>の下に<li>渡辺さん</li>が追加されます。
$(".name").prepend(`<li>渡辺さん</li>`);の場合は<li>佐藤さん</li>の上に<li>渡辺さん</li>が追加されます。
$(".name").after(`<div>後ろに追加</div>`);の場合は</ul>の下に<div>後ろに追加</div>が追加されます。
$(".name").before(`<div>前に追加</div>`);の場合は<ul class="name">の上に<div>前に追加</div>が追加されます。
2 要素削除
アプリケーション作成の際に要素削除で用いたのは下記の3つです
$(a).remove();
$(a).children().remove();
$(a).empty();
基本的な使い方は要素追加の時と同じでaの箇所にclass名などを指定します。
要素削除は各機能ごとにコードを用いて説明したいと思います。
<body>
<ul id="name_list">
<li id="name1">佐藤さん</li>
<li id="name2">田中さん</li>
<li id="name3">加藤さん</li>
</ul>
<script>
$("#name1").remove();
$("#name_list").children().remove();
$("#name1").empty();
</script>
</body>
$("#name1").remove();を実行した場合は<li id="name1">佐藤さん</li>の要素が削除され下記のようなHTMLになります。
<body>
<ul id="name_list">
<li id="name2">田中さん</li>
<li id="name3">加藤さん</li>
</ul>
</body>
$("#name_list").children().remove();を実行した場合は下記のようなHTMLになります。
<body>
</body>
$("#name1").empty();を実行した場合は<li id="name1">佐藤さん</li>の要素の中身が削除され下記のようなHTMLになります。
<body>
<ul id="name_list">
<li id="name1"></li>
<li id="name2">田中さん</li>
<li id="name3">加藤さん</li>
</ul>
</body>
最後に
上記は基本的な要素追加、削除方法です。この他にも様々な方法がありますのでその都度自分がやりたいことにあった方法を探していきましょう！