ajax response and html not working properly

Question

Here I am trying to get result in jsp page using ajax but i am getting improper result.

Problem: My ajax response is displayed first instead of my table headings. That means it should show table headings and then table content but not happening.

my jsp page displaying result

My Ajax code:

<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>

Here is my html code:

<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

Your HTML structure is invalid. You can't have a div as a direct child of table and as a parent of tr . What you're looking for there is thead or tbody , not div . It's being corrected by the browser, relocating the div to before the table. (Because it's invalid, the browser can do anything it wants: Put the div before, put it after, treat it as though it were a tbody , ...) Putting a table in a p is similarly invalid. You can see the rearrangement with the dev tools of your browser: Just right-click the table headers and choose "Inspect element" (or similar):

I recommend reviewing the various rules for what elements can go where in the spec .

Probably, you want both thead and 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>