jquery div框显示在按钮顶部

这是我正在做的小提琴

我试图让框显示在按钮的顶部，但在现有div框的底部

  <div id="top_form">
  <form>
    Street: <input name="titles[]" type="text" placeholder="eg: 123 Fake st."><br><br>
    City: <input name="titles[]" type="text" placeholder="eg: Bellflower">
    <select>
    <option value=" ">State</option>
    <option value="ca">CA</option>
    <option value="az">AZ</option>
    <option value="de">DE</option>
  </select>
     Zip: <input name="titles[]" type="text" placeholder="eg: 91745"><br />

 </form>

 </div>
    <br />
 <a id="awsomeButton" href="#">+ Add Loction</a>

街道：


城市：
陈述
加利福尼亚州
阿兹
判定元件
Zip:

这是剧本

var tpl = ""
 + "<div id='location_div_<%= id %>'><h1>My Location #<%= id %></h1></div>";

  var newId = new Date().getTime();
 var template = _.template(tpl);
   var compiled = template({id: newId});

 var form = ""
+ "<div id='added_form'><a href='#' class='close_btn'>x</a><form> Street: <input       name='titles' type='text'><br /><br />City: <input name='titles' type='text'><select><option value=' '>State</option><option value='ca'>CA</option></select>Zip: <input name='titles' type='text'></form></div>"


 $('#awsomeButton').on('click', 
    function(e){
    $(form).hide().appendTo('body').fadeIn('slow');
});

var tpl=“”
+“我的位置”#；
var newId=newdate（）.getTime（）；
var-template=uu.template（tpl）；
var compiled=template（{id:newId}）；
var form=“”
+“街道：

城市：州邮编：”
$（“#awsomeButton”）。在（'单击'，
职能（e）{
$（form）.hide（）.appendTo（'body'）.fadeIn（'slow'）；
});

而不是

.appendTo('body')

将其附加到

.appendTo('#top_form')

最好把你的最上面的表格放在另一个分区里

<div id="container" >
    <div id="top_form">

---

我有点这样做了，但是我在顶部表单id的底部添加了容器div。这样做可以吗？当然可以。。你可以这么做，但把它们放在一起更有意义。。此外，aHTML页面中的

ID

应该是唯一的。将它们替换为一个类而不是另一个类。在添加到页面的任何元素上都不应该使用固定id属性，因为它可以被添加多次，并且id应该是唯一的。

.appendTo('#container')