Gerador dinâmico de tabela

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <title>Generador de Tabela</title>
</head>
<body>
  <div class="container mt-5">
    <h2 class="text-center mb-5">Gerador de Tabela</h2>
    <p>Como funciona e como usar o gerador de tabela:</p>
    <p>Temos um área de texto onde o usuário pode inserir os dados da tabela separados por vírgulas. A primeira linha será sempre o cabeçalho da tabela. (Cada linha corresponde à uma linha da tabela. Quando o botão "Gerar Tabela" é clicado, o JavaScript extrai os dados da área de texto e gera uma tabela HTML dinamicamente. <small><b>OBS: Ele aceita tag´s html dentro da linha (caso por exemplo queira inserir uma imagem ou um link.</b></small></p>
    <p>Com a tabela completa gerada clique em Copiar HTML e ele irá copiar a tabela gerada (as tags com as informações) e você pode salvar sua página ou banco de dados.</p>
    <div class="form-group">
      <textarea class="form-control" rows="5" id="texto"></textarea>
    </div>
    <div class="text-center">
      <button class="btn btn-primary mr-2" id="gerar">Gerar Tabela</button>
      <button class="btn btn-success" id="copiar">Copiar HTML</button>
    </div>
    <br>
    <div class="table-responsive">
      <table class="table table-bordered" id="tabela">
      </table>
    </div>
    <br>
    <div class="form-group">
      <textarea class="form-control" rows="5" id="html" readonly></textarea>
    </div>
  </div>
  <script>
    const gerar = document.querySelector("#gerar");
    gerar.addEventListener("click", function() {
      const texto = document.querySelector("#texto").value;
      const linhas = texto.split("\n");
      let conteudo = "<thead><tr>";
      const primeiraLinha = linhas[0].split(",");
      for (let i = 0; i < primeiraLinha.length; i++) {
        conteudo += `<th>${primeiraLinha[i]}</th>`;
      }
      conteudo += "</tr></thead><tbody>";
      for (let i = 1; i < linhas.length; i++) {
        conteudo += "<tr>";
        const valores = linhas[i].split(",");
        for (let j = 0; j < valores.length; j++) {
          conteudo += `<td>${valores[j]}</td>`;
        }
        conteudo += "</tr>";
      }
      conteudo += "</tbody>";
      document.querySelector("#tabela").innerHTML = conteudo;
      document.querySelector("#html").value = conteudo;
    });
    const copiar = document.querySelector("#copiar");
    copiar.addEventListener("click", function() {
          const html = document.querySelector("#html");
      html.select();
      document.execCommand("copy");
    });
  </script>
</body>
</html>