How to use JS to create a large list?

Here is an example:
Example with array
var items= [];
var oth = '<li>oth 1</li><li class="test">oth2</li>';
items.push(oth );
for (var c = 0; c < arr.length; c++) {
items.push('<li title="'+arr[c].title+'" class="'+arr[c].cat+'">'+arr[c].title+'</li>');
}
$('#container').html('<ul id="list">'+items.join(")+'</ul>');

or so 
for (var c = 1; c < arr.length; c++) {
items[c]='<li title="'+arr[c].title+'" class="'+arr[c].cat+'">'+arr[c].title+'</li>';
}


Example with a variable
var items= ";
var oth = '<li>oth 1</li><li class="test">oth2</li>';
items += oth;
for (var c = 0; c < arr.length; c++) {
items += '<li title="'+arr[c].title+'" class="'+arr[c].cat+'">'+arr[c].title+'</li>';
}
$('#container').html('<ul id="list">'+items+'</ul>');


The number of elements in the list ~1000
What will work faster ?)
June 10th 19 at 15:37
2 answers
June 10th 19 at 15:39
The difference you see. But the second faster.
June 10th 19 at 15:41
When inserting a single element appendChild taxis, when you insert a large piece is to collect everything in one line, and insertAdjacentHTML('afterbegin', htmlStr).

Find more questions by tags jQueryJavaScript