JavaScript 大量の要素をDOMに追加する際の、createDocumentFragmentの使い方。 - Qiita;(function(){ var $ul = document.querySelector('#list'); // ul要素 var songs = ['終わらない歌', 'キスしてほしい', '僕の右手', '情熱の薔薇', '人にやさしく']; // もっと沢山要素がある想定でお願いします〜 // 低速バージョン // 毎回DOMツリーへの更新が発生 for(var cnt=0, len=songs.length; cnt<len; cnt++){ var $li = document.createElement('li'); var song = document.createTextNode(songs[cnt]); $li.appendChild(song); $ul.appendChild($li); // 配列の要素数分、毎回追加 } /* 高速化！ fragment 訳
