JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="appendRow();"> Add row </button>
<button onclick="cloneRow();"> clone row </button>
<table id="myTable">
    <tbody>
        <tr>
            <td>line 1</td>
        </tr>
        <tr>
            <td>line 2</td>
        </tr>
        <tr>
            <td>line 3</td>
        </tr>
        <tr>
            <td>line 4</td>
        </tr>
        <tr id="rowToClone">
            <td>I am a clone</td>
        </tr>
    </tbody>
</table>

JavaScript

function appendRow(){
var table = document.getElementById('myTable');
var middleRow = table.insertRow(1);
var cell1 = middleRow.insertCell(0);
var textnode1=document.createTextNode('dom insterted');
cell1.appendChild( textnode1 );
}
function cloneRow(){
var table = document.getElementById('myTable');
var row = document.getElementById("rowToClone"); // find row to clone
var clonedRow = row.cloneNode(true); 
clonedRow.id = "newID"; // change id or other attributes/contents
//table.appendChild(clonedRow); // add new row to end of table
var middleRow = table.insertRow( Math.floor( table.rows.length / 2 ) );
var cell1 = middleRow.insertCell(0);    
 cell1.appendChild( clonedRow );   
    
}