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>
          <td>列1</td>
          <td>列2</td>
          <td>列3</td>
          <td>列4</td>
          <td>列5</td>
          <td>列6</td>
        </tr>
      </thead>
      <tbody>
        <tr id="template" onClick="onclickRow('_ID')">
          <td>_ID</td>
          <td>_NAME</td>
          <td>_ROW1</td>
          <td>_ROW2</td>
          <td>_ROW3</td>
          <td>_ROW4</td>
          <td>_ROW5</td>
          <td>_ROW6</td>          
        </tr> 
      </tbody>
    </table>
    <script src="src/jquery"></script>
    <script src="src/script.js"></script>
  </body>
</html>

JavaScript

$(function(){
	const start = performance.now();
  for (let i = 0; i < 10000; i++) {
  	let template = $('#template').clone();
    $('tbody').append(template);
  }
  $("table > tbody > tr:first").hide();
  const end = performance.now();
  
  console.log(end - start);
});