Run results for: Dynamic Create of Table: createElement() vs append HTML

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0

Browser: Firefox 103

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table id="tbl">
  <tbody></tbody>
</table>

Script Preparation code:

var table = $('#tbl'),
    tbody = table.find('tbody');

var data = { one: 'one', two: 'two', three: 'three', four: 'four', five: 'five' };

Tests:

createElement
var tr = $(document.createElement('tr')); var td = $(document.createElement('td')); td.text(data.one).append(td); td = $(document.createElement('td')); td.text(data.two).append(td); var td = $(document.createElement('td')); td.text(data.three).append(td); var td = $(document.createElement('td')); td.text(data.four).append(td); var td = $(document.createElement('td')); td.text(data.five).append(td); tbody.append(tr);
Append HTML
var html = '<tr>'; html += '<td>'+data.one+'</td>'; html += '<td>'+data.two+'</td>'; html += '<td>'+data.three+'</td>'; html += '<td>'+data.four+'</td>'; html += '<td>'+data.five+'</td>'; html += '</tr>'; tbody.append(html);
Combination
var tr = $(document.createElement('tr')); tr.append('<td>'+data.one+'</td>'); tr.append('<td>'+data.two+'</td>'); tr.append('<td>'+data.three+'</td>'); tr.append('<td>'+data.four+'</td>'); tr.append('<td>'+data.five+'</td>'); tbody.append(tr);