JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <td>ID</td>
          <td>名前</td>
        </tr>
      </thead>

    </table>
    <script src="src/jquery"></script>
    <script src="src/script.js"></script>
  </body>
</html>

JavaScript

$(function(){
	const start = performance.now();
  const tbody = document.createDocumentFragment('tbody');
  
  for (let i = 0; i < 10000; i++) {
  	const tr = document.createElement('tr');
  	const td1 = document.createElement('td');
    td1.textContent = '_ID';
    tr.appendChild(td1);
    const td2 = document.createElement('td');
    td2.textContent = '_NAME';
    tr.appendChild(td2);
    const tdCol1 = document.createElement('td');
    tdCol1.textContent = '1111';
    tr.appendChild(tdCol1);
    const tdCol2 = document.createElement('td');
    tdCol2.textContent = '2222';
    tr.appendChild(tdCol2);
    const tdCol3 = document.createElement('td');
    tdCol3.textContent = '3333';
    tr.appendChild(tdCol3);
    const tdCol4 = document.createElement('td');
    tdCol4.textContent = '4444';
    tr.appendChild(tdCol4);
    const tdCol5 = document.createElement('td');
    tdCol5.textContent = '5555';
    tr.appendChild(tdCol5);
    const tdCol6 = document.createElement('td');
    tdCol6.textContent = '6666';
    tr.appendChild(tdCol6);
 
    tbody.appendChild(tr);
  }
  $('table')[0].appendChild(tbody);
  
  const end = performance.now();
  console.log(end - start);
});