尝试从不同的文件加载具有嵌套div的div

I need to have my index.php load some content from home.php. Within index.php, there is a div class="content" which contains a dialog box (for a user login). Within home.php, there is also a div class="content" which contains some p's and tables (tables are created dynamically with php by querying a database). When the user clicks submit on index.php, I would like to replace the the contents of div class="content" with the same div (including all tables, etc.) from home.php. The problem is when I load the new div, I lose all of the nested divs (including the php created rows and columns), which I need. Any help would be tremendously appreciated. Thanks in advance.

This is the html from index.php:

<div class="content" id="first">
        <div id="login">
            <p>Username:
                <input type="text" id="loginName" Required>
            </p>
            <p>Password:
                <input type="password" id="loginPass" Required>
            </p>
            <span id="loginError">Please enter a username AND password</span>

        </div>
</div><!--content=first-->

jquery from index.php:

$("#regButton").on('click',function(){
     $(".content").load("home.php .content >*");
});

html from home.php:

<div class="content" id="home">
    <div id="left">
        <div id="top">
        </div>
        <div id="bottom">
            <h2>Grades</h2>
        </div>
    </div>
    <div id="center">
        <h2>My Schedule</h2>
        <table>
                <tr>
                <td>Course ID</td>
                <td>Course Name</td>
            </tr>

            <?php
            echo "<tr>";
            echo "<td>" . $row['courseDept']. $row['courseNumber']. " - ". $row['courseSection']."</td>";
            echo "<td>" . $row['courseName']."</td>";
            echo "</tr>";               
            ?>
        </table>
    </div>
</div><!--content#home-->

One of the main issues I see is that having the same "ID" is not according to standard. Change one div from "content" to something else.

As posted above, this example works when I run it locally.

The parent div retains id=first after loading the home.php file. You're not attaching any css to first and hiding it during this process are you?

The only way I can reproduce the behavior you're explaining is by removing class='content' from the home.php div, causing the jquery selector not to locate the div correctly. then it replaces the id='first' div with nothing.

If you change your jquery selector to:

$(".content").load("home.php");

Does that load the content? I realize this will create a nested set of divs with the class='content', and that's not what you want. Just asking to see if trying that gets the table to show or not.

It's kind of tricky to help because your example seems to work for me. Are there any other details you could provide? jQuery version, etc?