jQueryで多数の要素を生成して追加する場合のパフォーマンスについて | JavaScript | かたつむりくんのWWW

jQuery で多数の要素を生成して別の要素に追加する場合、どんな書き方が速いのかなーと思って試してみました。 今回は、3,000回ループを回して既存の要素に追加していくというのを、パッと思いつく感じの6パターンで試してみました。 サンプル（※モダンブラウザ以外では実行しない方が良いです！） さて、HTMLのソースは次の通り単純です。 <ul id="result"> <li>このリストに結果を追記する</li> </ul> また、次の1文は最初に定義しておきます。 var $result = $("#result"), n = 3000; 1 : 毎回要素を生成して append() していく for (var i = -1; ++i < n;) { var $li = $("<li></li>").text(i).attr("id","id_" + i).addClass("class

[yayocan]

要素　生成　push　js

[AmaiSaeta]

DOM Node(Element)生成は重いって事なのかね。あと、append()よりinnerHTMLへの代入の方が早いと。

[kkeisuke]

DOMに追加するところは、append() よりも innerHTML の方が圧倒的に速い