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

jQueryでul要素に新しいリスト項目を追加するには？append()メソッドの使い方

ul要素に新しいリスト項目（<li>）を追加するには、jQueryのappend()メソッドを使用します。append()は、指定した要素の末尾にHTMLコンテンツを挿入するためのメソッドです。

基本的な手順

まず、ユーザーが値を入力できるテキスト入力フィールドを用意します。

Value: <input type="text" name="task" id="input">

次に、ボタンがクリックされたタイミングで、val()メソッドで入力値を取得し、append()メソッドを使ってリストに新しい<li>要素を追加します。

$('button').click(function() {
    var mylist = $('#input').val();
    $('#list').append('<li>' + mylist + '</li>');
    return false;
});

コードのポイント

  • val()：入力フィールド（#input）に入力された値を取得します。
  • append()：対象の要素（#list）の末尾に、指定したHTMLを追加します。
  • return false：フォーム送信によるページの再読み込みを防止します。

完全なサンプルコード

以下のコードを実行すると、jQueryで新しいリスト要素を追加する実際の動作を確認できます。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('button').click(function() {
                var mylist = $('#input').val();
                $('#list').append('<li>' + mylist + '</li>');
                return false;
            });
        });
    </script>
</head>
<body>
    <form>
        Value: <input type="text" name="task" id="input">
        <button>Submit</button>
        <br>

        <p>上の欄に値を入力し、「Submit」をクリックすると、リストに新しい項目が追加されます。</p>
        <ul id="list">
        </ul>
    </form>
</body>
</html>

補足：prepend()との違い

append()はリストの末尾に要素を追加しますが、先頭に追加したい場合はprepend()メソッドを使用します。また、動的に追加した要素に対しても後からCSSやイベント処理を適用できるため、ToDoリストやタスク管理ツールなど、インタラクティブなUIの実装に幅広く活用できます。

  1. JavaScriptで親要素にCSSクラスを適用・継承する方法をわかりやすく解説

    JavaScriptを使って新しく作成した要素にCSSのスタイル（クラス）を適用したい場合、document.createElement()、classList.add()、そしてappend()を組み合わせることで簡単に実現できます。 基本的な仕組み 処理の流れは以下の3ステップです。 1. document.createElement()： 新しいdiv要素などのHTML要素を動的に生成します。 2. classList.add()： 生成した要素に対して、あらかじめ定義しておいたCSSクラス（.classセレクタ）を追加します。これにより、そのクラスに設定されたスタイルが継承・適用されま

  2. MatplotlibでX軸の下に脚注を追加する方法をわかりやすく解説

    Matplotlibで作成したグラフのX軸の下に脚注（注釈）を追加したい場合、figtext()メソッドやtext()メソッドを使用することで簡単に実現できます。本記事では、figtext()メソッドを使った具体的な手順をサンプルコードとともに紹介します。脚注を追加する手順figureサイズを設定し、サブプロット間および周囲の余白（パディング）を調整します。NumPyを使用してx座標とy座標のデータポイントを作成します。作成したx・yデータポイントをプロットします。脚注を配置するために、figtext()メソッドにx・yの位置情報とboxプロパティ（枠線や背景色などのスタイル）を指定して呼び出