JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

jQueryのappend()メソッドとは？基本から実践例までわかりやすく解説

jQueryとは？

jQueryは、開発者がわずか数行のコードでDOM操作、イベントハンドラの記述、アニメーション、AJAXリクエストなどを実現できるJavaScriptライブラリです。これは、jQuery API独自のセレクタとメソッドによって可能になっています。その中の一つがappend()メソッドです。

jQuery append()メソッドとは？

append()メソッドは、「コンテンツ」（HTML文字列、テキスト、配列、DOM要素、さらにjQueryオブジェクトなど）を1つまたは複数の引数として受け取り、セレクタに一致するすべての要素の末尾に追加（アペンド）できるメソッドです。

よくある使用例としては、リストの末尾に新しい項目を追加する（ToDoリストに新しいタスクを加えるなど）ことや、ボタンをクリックしたときに新しいコンテンツを表示することが挙げられます。それでは、サンプルコードを見ながらappend()の動作を確認していきましょう。

jQuery append()の基本的な使い方

ToDoリストに項目を追加する例をもとに、append()がセレクタに対してどのように呼び出され、一致するすべての要素へコンテンツを挿入するのかを見ていきます。

まずは、基本的なToDoリストを作成するHTMLです。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>To Do List</h2>
<ol class="list1">
<li>Read Chapters 1 & 2 </li>
<li>Meeting at 3:00pm</li>
<li>Write about yesterday's reading</li>
</ol>
</body>
</html>

ここで重要なのは、HTMLページの<head>内にある<script>タグでjQueryライブラリを読み込んでおくことです。これを忘れると、ページ上でjQueryを使用できません。

これで、ToDoリストがきれいに表示されます。

jQueryのappend()メソッドとは？基本から実践例までわかりやすく解説

今日はやる気満々なので、リストの末尾に項目を追加してみましょう。夕食の予定を書き加えるのはどうでしょうか。

HTMLの構造を見ると、順序付きリスト（<ol>）にはlist1というクラスが付いています。これは好都合です。<body>の末尾にもう一つ<script>タグを追加すれば、このリスト全体を選択できます。

<script>
 $(document).ready( () => {
   $(".list1").append("<li>Make dinner plans</li>")
 })
</script>

<script>タグの中に$記号がありますね。これは何なのでしょうか？　これらこそが、強力なjQueryセレクタです。

要素名、クラス名、id名などを渡すことで、DOM内のあらゆる要素を選択できます。この例では、クラスlist1を持つ要素すべてを選択しており、結果として<ol>要素全体が対象になります。また、$(document)セレクタはページ全体を選択し、ready()メソッドによって、ページが完全に読み込まれるまで次のコードの実行を待機します。これにより、コードが意図した順序で確実に実行されます。

ready()のコールバック関数内では、クラスlist1を持つすべての要素、つまり今回の場合は<ol>が選択され、append()に渡された<li>が閉じタグ</ol>の直前に挿入されます。ページの読み込み後、「Make dinner plans」というリスト項目がToDoリストの末尾に追加されるわけです。

jQueryのappend()メソッドとは？基本から実践例までわかりやすく解説

うまくいきましたね！　次に、別の例を見てみましょう。今度は、ボタンがクリックされたときに新しいコンテンツを表示するケースです。

jQuery append()の実践例：ボタンクリックでコンテンツを表示

Webページにボタンがあり、そのボタンがクリックされたときに新しいコンテンツを表示したいとしましょう。ページの再読み込みやリダイレクトなしで新しいコンテンツを表示できれば、ユーザーにとってより快適で満足度の高い体験になります。

ここにこそ、jQueryのパワーと洗練さがあります。ボタンがクリックされたときに、再読み込みやリダイレクトなしで新しいコンテンツを表示できるのです。

まず、ベースとなるHTMLは以下のとおりです。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="content">
  <p>Hello World!</p>
</div>
<button id="btn-main">Click Me!</button>
</body>
</html>

ToDoリストのときとほぼ同じ構成ですが、今回はボタンが追加されています。

jQueryのappend()メソッドとは？基本から実践例までわかりやすく解説

それでは、これまで学んだjQueryの知識を活かして、ボタンがクリックされたときに「Hello World!」の下に新しいコンテンツを追加してみましょう。

<script>
  $(document).ready( () => {
    $("#btn-main").click( () => {
      $("p").append("<b>Goodbye</b>")
    })
  })
</script>

ここでも、<body>の末尾に<script>タグを配置しています。ToDoリストの例と同様に、他の処理を行う前にドキュメントの読み込み完了を待ちます。

ドキュメントの読み込みが完了すると、ボタンをクリックできるようになり、クリックイベントでclick()メソッドが呼び出されます。すると<p>タグが選択され、引数として渡したHTML文字列「<b>Goodbye</b>」を指定してappend()メソッドが実行されます。これにより、<p>タグの末尾に太字の「Goodbye」というテキストが挿入されます。

最終的なHTMLの出力は次のようになります。

<div class="content">
 <p>Hello World.</p><b>Goodbye</b>.
</div>

<button id="btn-main">Click Me</button>

画面上ではこのように表示されます。

jQueryのappend()メソッドとは？基本から実践例までわかりやすく解説

なお、Goodbyeを<p>ではなく<div>の末尾に追加したい場合は、セレクタをpからクラスcontentに変更するだけです。

<script>
  $(document).ready( () => {
    $("#btn-main").click( () => {
      $(".content").append("<b>Goodbye</b>")
    })
  })
</script>

この場合の表示は次のようになります。

jQueryのappend()メソッドとは？基本から実践例までわかりやすく解説

まとめ

本記事では、append()メソッド単体での基本的な動作と、ready()やclick()といったコールバック関数と組み合わせた実践的な使い方を解説しました。

<script>タグ内にjQueryのセレクタとメソッドを記述するだけで、セレクタに一致する任意の要素の末尾に、さまざまな種類のコンテンツを簡単に追加できます。append()メソッドを活用すれば、ページの再読み込みやリダイレクトなしに、必要なタイミングでユーザーへコンテンツを表示できるようになり、Webアプリケーションの表現力が大きく広がります。

  1. JavaScriptでプロトタイプを使ってメソッドを共有する方法

    JavaScriptにおけるメソッドの共有JavaScriptでは、メソッドをオブジェクト（コンストラクタ関数）のprototypeプロパティに定義することで、複数のインスタンス間でそのメソッドを共有できます。通常、コンストラクタ内でthis.displayInfo = function(){...}のようにメソッドを定義すると、生成されるインスタンスごとに関数のコピーが作成され、メモリを無駄に消費します。一方、prototypeに定義すれば、関数は一度だけ生成され、すべてのインスタンスから参照・呼び出しできるようになります。これはメモリ効率の面でも大きなメリットがあります。以下は、JavaS

  2. CSVを開かずにXLSXへ変換する5つの簡単な方法【初心者向け完全ガイド】

    業務やデータ処理の現場では、CSV形式のファイルを受け取ることがよくあります。しかし、CSVはそのままでは扱いにくく、必ずしも使いやすい形式とは言えません。この記事では、CSVファイルを実際に開かずにXLSX形式へ変換する5つの方法を詳しく解説します。説明には、「氏名(Name)」「メールアドレス(Email)」「生まれた年(Birth Year)」の3列からなるサンプルデータセットを使用します。CSVを開かずにXLSXへ変換する5つの方法方法1:テキスト インポート ウィザードを使って変換する最初の方法は、Excel標準搭載のテキスト インポート ウィザード(Text Import Wiza