jQueryのノードリストみたいなやつをつくりたいときはadd()をつかうと良いかも 😎

例えば配列をもとにDOMをたくさんつくりたいとき、

なにも考えないバージョン

let $body = $(document.body),
    arr = [
      {index: "66", name : "岡田"},
      {index: "00", name : "高濱"},
      {index: "1", name : "清田"},
      {index: "54", name : "デスパイネ"},
      {index: "61", name : "角中"},
      {index: "44", name : "井上"},
      {index: "7", name : "鈴木"},
      {index: "24", name : "吉田"},
      {index: "23", name : "中村"}
    ];

for (let i = 0, length = arr.length; i < length; ++i) {
  $body.append($(`<div data-index="${arr[i]["index"]}">${arr[i]["name"]}</div>`)); // 毎回レンダリングはしる
}

こんな感じで毎回appendすると、毎回レンダリングされてしまうので、まとめたいと思いますよね。

まとめたバージョン

let $body = $(document.body),
    arr = [
      {index: "66", name : "岡田"},
      {index: "00", name : "高濱"},
      {index: "1", name : "清田"},
      {index: "54", name : "デスパイネ"},
      {index: "61", name : "角中"},
      {index: "44", name : "井上"},
      {index: "7", name : "鈴木"},
      {index: "24", name : "吉田"},
      {index: "23", name : "中村"}
    ],
    $df = $(document.createDocumentFragment()),
    $players;

for (let i = 0, length = arr.length; i < length; ++i) {
  $df.append($(`<div data-index="${arr[i]["index"]}">${arr[i]["name"]}</div>`));
}
          
$body.append($df);

$players = $body.find("[data-index]"); // ここがもったいない

で、僕はいままでdocumentFragmentをつかってまとめてたわけですが、
for文のなかで生成したjQueryオブジェクトの参照を持ちたいと思った時、find()で探し直すのがもったいないですよね。

まとめつつ参照も保持バージョン

let $body = $(document.body),
    arr = [
      {index: "66", name : "岡田"},
      {index: "00", name : "高濱"},
      {index: "1", name : "清田"},
      {index: "54", name : "デスパイネ"},
      {index: "61", name : "角中"},
      {index: "44", name : "井上"},
      {index: "7", name : "鈴木"},
      {index: "24", name : "吉田"},
      {index: "23", name : "中村"}
    ],
    $players = $();

for (let i = 0, length = arr.length; i < length; ++i) {
  $players = $players.add($(`<div data-index="${arr[i]["index"]}">${arr[i]["name"]}</div>`)); // appendと違って毎回再代入が必要
}
          
$body.append($players);