Onchange adds data to table row using ajax

Question

I want to change the table to the selected parameter value in the select tag. But I also want to add this result to an existing row in the table, for this I can extract data to the table, but could not add a new row to the internal html tbody. Just want to know how to add a line to the ajax response text. I tried it.

<script>
    function resInvoice(InvoiceVal){
        var xhttp;    
        if (InvoiceVal == "") {
            document.getElementById("InvoiceBody").innerHTML = "";
            return;
        }
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("InvoiceBody").innerHTML="<tr>"+xhttp.responseText+"</tr>");
            }
        };
        xhttp.open("GET", "GetSelect.php?InData="+InvoiceVal, true);
        xhttp.send();
    }

</script>

<tbody id="InvoiceBody">
    <tr id="select">
        <td colspan="2">
            <select class='form-control select2' onchange="resInvoice(this.value)">          
                <?php 
                    $fqeyr="SELECT ItemID,LineItemName FROM `per_addnew_lineitem`";
                    $faddnew=mysqli_query($con,$fqeyr);

                    while($fnrow=mysqli_fetch_array($faddnew)){
                        $lname=$fnrow['LineItemName'];
                ?>

                <option value="<?php echo $fnrow['ItemID'] ;?>">
                    <?php echo $lname ; ?>
                </option>
                <?php } ?>         
            </select>
        </td>
        <td>
            <button type="button" class="btn btn-primary btn-xs" style="margin-top:12px;" data-toggle="modal" data-target="#AddNewLine">+ Add New Line Item </button>
        </td>
    </tr>
</tbody>

And IN GetSelect.php

if(isset($_GET['InData'])){
    $InData=$_GET['InData'];
    $InDataRes=mysqli_query($con,"SELECT * FROM `per_addnew_lineitem` where ItemID='$InData'");
    while($InvoiceD=mysqli_fetch_array($InDataRes)){
        echo '<td>'.$InvoiceD['LineItemName'].'</td>' ;
        echo '<td>'.$InvoiceD['Description'].'</td>' ;
        echo '<td>'.$InvoiceD['Calculation'].'</td>' ;
    }
}

Answer 1

try it

var new_row = "<tr>" + xhttp.responseText + "</tr>";
$("#InvoiceBody").append(new_row);

Instead

 document.getElementById("InvoiceBody").innerHTML="<tr>"+xhttp.responseText+"</tr>");