Добавленная строка таблицы заканчивается над таблицей, а не в ней

Question

Моя функция авторефракции sh в jQuery обновляет таблицу динамически. К сожалению, обновленная строка всегда отправляется ДО таблицы (над thead), по какой-то причине я не вижу в своем коде:

html:

<div class="container"><h1>Refresh Test:</h1></div>
    <div id="table_1" class="container">
        <table class="table" style="width: 100%"> 
            <thead><tr><th>1</th><th>2</th><th>time</th></tr></thead> 
            <tbody>
                <div id="tablerow" > </div>
            </tbody>
        </table>
    </div>

jQuery функция обновления:

<script type="text/javascript">function refreshTable()  {  
    $.get(
        "/foo", "", 
        function(data) {
            $("#tablerow").html("<tr><td>" + JSON.parse(data).D1 + "</td><td>" + JSON.parse(data).D2 + "</td><td>" + JSON.parse(data).D3 + "</td></tr>")
        },
    ) 
};
window.setInterval(refreshTable, 3000)</script>

При проверке я вижу <tr> .... </tr> в разделе ::before. Также: если я создаю пустые строки таблицы раньше и добавляю по <td> (например: <tr><td><div id="NAME"></div></td></tr> с #NAME в скрипте вместо tablerow и только одним значением).

Answer 1

div не может быть ребенком tbody. Дайте tbody идентификатор «tablerow», удалите div и повторите попытку

Answer 2

Вы можете попробовать ниже код ..

    <script type="text/javascript">
       function refreshTable()  {  
        $.get(
            "/foo", "", 
            function(data) {
           if($(".table tbody").children().length > 0)){
                $(".table").append("<tr><td>" + JSON.parse(data).D1 + "</td><td>" + JSON.parse(data).D2 + "</td><td>" + JSON.parse(data).D3 + "</td></tr>")
            }
            else{
                $(".table").html("<tr><td>" + JSON.parse(data).D1 + "</td><td>" + JSON.parse(data).D2 + "</td><td>" + JSON.parse(data).D3 + "</td></tr>) 
            } 
            },
         ) 
      };
          window.setInterval(refreshTable, 3000)
    </script>

проверить эту скрипку https://jsfiddle.net/0djn9f15/