.append()について

下のjsコードの $('<li class="list">').append(word);
という部分がどうしても理解できません。。。

リファレンスで.append();各要素に引数で指定したコンテンツを追加する。と合ったのですが、
そもそも'<li class="list">'という文字列に変数wordを追加したら、

'<li class="list">' + word(変数)という形になると思うのですが</li>の閉じタグはいらないのですか？？

よく理解できてないようなので、どういう処理をしているのかを教えていただけると助かります。

html
1  <body>
2    <div class="form-group">
3      <input type='text' id="keyword" class="form-control" placeholder="好きなフルーツを入力してください">
4      <button type="button" id="submit" class="btn">検索</button>
5    </div>
6    <ul id="list"></ul>
7  </body>

js
1var fruits = ['apple', 'apricot', 'avocado', 'blueberry', 'cherry', 'coconut', 'cranberry', 'dragonfruit', 'durian', 'grape', 'grapefruit', 'guava', 'kiwi fruit', 'lemon', 'lime', 'lychee', 'mango', 'melon', 'watermelon', 'miracle fruit', 'orange', 'bloodorange','clementine','mandarine','tangerine','papaya','passionfruit','peach','pear','persimmon','physalis','plum/prune','pineapple','pomegranate','raspberry','rambutan','star fruit','strawberry'];
2
3$(function() {
4  var list = $("#list");
5
6  function appendList(word) {
7    var item = $('<li class="list">').append(word); 
8    list.append(item);
9  }
10
11  function editElement(element) {
12    var result = "^" + element;
13    return result;
14  }
15
16  $("#submit").on("click", function() {
17    var input = $("#keyword").val();
18    var inputs = input.split(" "); //split() 文字列を複数の部分文字列に区切り、文字列の配列に分割する。
19    var newInputs = inputs.map(editElement);
20    var reg = RegExp(newInputs.join("|")); // AAA|BBB AAAとBBBにマッチする
21
22    $(".list").remove();
23
24    $.each(fruits, function(i, fruit) {
25      if (fruit.match(reg)) {
26        appendList(fruit);
27      }
28    });
29
30    if ($(".list").length === 0) { //class.length クラスの要素数を取得
31      appendList("一致する果物はありませんでした");
32    }
33  });
34});

行動規範の内容に同意します

回答1件

ベストアンサー

jQuery() の第一引数に HTML を入れる次の構文は要素を新しく作る機能を持ちます。

js
1$('<li class="list">')

つまりこれは list というクラス属性を持つ <li> 要素を新しく作ってそれを返すという意味です。
詳細は https://api.jquery.com/jQuery/#jQuery2 をご参照ください。

また <li> における閉じタグは HTML5 においては一定の条件のもとで任意です。直後に <li> が続く場合か、親要素にそれ以上のコンテンツがない場合はつけてもつけなくても構いません。
詳細は https://www.w3.org/TR/html5/grouping-content.html#the-li-element をご参照ください。

続いてこの新しく作られた要素に .append() を呼び出しています。.append() は jQuery の要素に別の要素を挿入する機能を持つので、word 引数で指定された内容が、さきほど作られた <li> 要素の内側に挿入されていく形になります。
詳細は https://api.jquery.com/append/ をご参照ください。

投稿2018/11/02 17:33

編集2018/11/02 17:34