Ответ Ajax и HTML не работает должным образом

Question

Здесь я пытаюсь получить результат на странице JSP, используя ajax, но я получаю неправильный результат.

Проблема: мой ajax-ответ отображается первым вместо заголовков таблицы.Это означает, что в нем должны отображаться заголовки таблиц, а затем содержимое таблицы, но это не происходит.

моя страница JSP, отображающая результат

мой код Ajax:

<script>
    $(document).ready(function(){
        $(function(){
            $('#form1').submit(function(e){
                e.preventDefault();
                var form = $(this);
                var post_url = form.attr('action');
                var post_data = form.serialize();

                $.ajax({
                    type: 'POST',
                    url: post_url,
                    data: post_data,
                    success: function(msg) {

                        console.log(msg);
                        $('#LogsReceived').append(msg);

                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            });
        });
    });
</script>

Вот мой HTML-код:

<div class="result" >

<p>
<table>

    <div id="LogsReceived">
        <tr>
            <th>Index</th>
            <th>Type</th>
            <th>Severity</th>
            <th>Source Host</th>
            <th>Source</th>
            <th>Program</th>
            <th>Priority</th>
            <th>Message</th>
            <th>User</th>
            <th>Facility</th>
            <th>Event Time</th>
        </tr>

    </div>
</table>
</p></div>

Answer 1

Ваша HTML структура недействительна.Вы не можете иметь div как прямой потомок table и как родитель tr.То, что вы ищете, это thead или tbody, а не div.Это исправляется браузером, перемещая div в перед таблицей.(Поскольку он недействителен, браузер может делать все, что ему захочется: поставьте div до, поставьте его после, обработайте, как если бы это был tbody, ...) Помещение table в p - этотак же недействительным.Вы можете увидеть перестановку с помощью инструментов dev вашего браузера: просто щелкните правой кнопкой мыши заголовки таблицы и выберите «Проверить элемент» (или аналогичный):

Я рекомендую ознакомиться с различными правилами для элементов, которые могут указывать в спецификации .

Вероятно, вам нужны и thead, и tbody:

<table>
    <thead>
        <tr>
            <th>Index</th>
            <th>Type</th>
            <th>Severity</th>
            <th>Source Host</th>
            <th>Source</th>
            <th>Program</th>
            <th>Priority</th>
            <th>Message</th>
            <th>User</th>
            <th>Facility</th>
            <th>Event Time</th>
        </tr>
    </thead>
    <tbody id="LogsReceived">
    </tbody>
</table>