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

jQueryメソッド：append（）

jQuery：簡単な紹介

jQueryは、開発者がわずか数行のコードでDOMを操作し、イベントハンドラー、アニメーション、およびAJAXリクエストを記述できるようにするJavaScriptライブラリです。これは、jQueryAPIに固有のセレクターとメソッドで可能です。これらのメソッドの1つは、append()です。 。

jQuery append（）とは何ですか？

append() メソッドは、「コンテンツ」（HTML文字列、テキスト、配列、要素、または複数のjQuery）の1つまたは複数の引数を取り、一致する要素のいずれかまたはすべての末尾にアタッチまたは「追加」することができます。セレクター。一般的な用途には、リストの最後にアイテムを追加すること（To Doリストの新しい「ToDo」アイテムなど）や、ボタンをクリックするだけで新しいコンテンツを表示することが含まれます。それでは、append()がどのように行われるかを見てみましょう。 いくつかのサンプルコードで動作します。

jQueryの使用方法append（）

上記のToDoリストに項目を挿入する例をとると、append()がどのように行われるかがわかります。 セレクターで呼び出され、一致するすべての選択にコンテンツを挿入します。

基本的なタスクリストを作成する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>

<script>内にjQueryAPIへのアドレスを含めることに注意することが重要です <head>のタグ HTMLページの。そうしないと、HTMLページでjQueryを使用できません。

これで、やることリストが美しくレンダリングされます！

jQueryメソッド：append（）

今日は生産性を感じているので、リストの最後にアイテムを追加しましょう。夕食の計画はどうですか？

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

HTMLレイアウトを参照すると、順序付きリスト（<ol>）が表示されます。 ）にはlist1のクラスがあります 。別の<script>を追加することでその選択全体を選択できるため、これは素晴らしいニュースです。 の下部にタグを付ける：

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

<script>の内部 タグ、いくつかの$記号があります。これは何？これらは強力なjQueryセレクターです。

いくつか例を挙げると、要素、クラス名、またはID名を渡すことで、DOM内の任意のものを選択できます。この場合、クラスがlist1,のすべてのものを選択しました。 <ol>全体を選択します エレメント。上記の(document) セレクターはページ全体を選択し、ready()を呼び出します ページが完全に読み込まれるまで、コードの次の行の呼び出しを待機するメソッド。これは、コードを順番に実行し続けるのに役立ちます。

さて、ready()の内部 コールバック関数。クラスがlist1.のすべての要素を選択しました。 この場合、これにより<ol>が選択されます <li>を挿入します append()に渡されます クロージング</ol>のすぐ上 。したがって、ページが読み込まれた後、Make dinner plans リスト項目は、やることリストに追加されます：

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>

ボタンがあることを除けば、やることリストを始めた方法とよく似ています：

jQueryメソッド：append（）

jQueryについて学んだことを使用して、「HelloWorld！」の下にさらにコンテンツを追加しましょう。ボタンがクリックされると。

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

繰り返しになりますが、の最後に

  1. JavaScriptでメソッドを共有する

    メソッドは、オブジェクトのプロトタイププロパティにアタッチすることで共有できます。これらのメソッドは、オブジェクトのすべてのインスタンス間で共有されます。 以下はJavaScriptでメソッドを共有するためのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-

  2. 開かずに CSV を XLSX に変換する方法 (5 つの簡単な方法)

    多くの場合、ファイルは CSV で取得されます フォーマット。そのファイル形式はあまりユーザーフレンドリーではありません。この記事では 6 を紹介します CSV を変換するメソッド XLSX に 開けずに。テクニックを示すために、3 列のデータセットを選択しました :「名前 」、「メール 」、「誕生」 年 開かずに CSV を XLSX に変換する 5 つの方法 1.テキスト インポート ウィザードを使用して、開かずに CSV を XLSX に変換 最初の方法では、テキスト インポート ウィザードを使用します CSV を変換する XLSX に 手順: まず データ テキ