import outer html as inline html

i have a html page sth.html containing

<div id="recoverpass">
    <h2>Recover Password</h2>
    <form action=开发者_运维技巧"#" method="post" name="recoverpass">
        <p><label> Enter E-Mail Address: </label> <input type="text" name="email" id="name" /></p>
        <input type="submit" value="Recover Password" />
    </form>
</div>
<div id="registernew">
        <h2>Register New User</h2>
        <form action="#" method="post" name="recoverpass">
            <p><label> Enter E-Mail Address: </label> <input type="text" name="email" id="name" /></p>
            <input type="submit" value="Recover Password" />
        </form>
</div>

In my index.html page, i have a popup that is loaded when corresponding links are clicked. What i want is that when forgot password popup is loaded, it should import html from sth.html then content of recoverpass 'div'. and when register popup is loaded, it should import html from sth.html then content of registernew 'div'.

easy to do with .load()

$("#popup").load("sth.html #recoverpass");
$("#popup").load("sth.html #registernew");