想要在单击 Href 链接时添加标签和文本框

Question

我正在使用 MVC 我的代码如下，

    <div class="form-inline">
    <label class="control-label"><b>Length</b></label>

    <input type="text" name="Refinishing.Room.Length.Feet" id="Refinishing_Room_Length_Feet" style="width: 80px" class="floor-text" />Ft
    <input type="text" name="Refinishing.Room.Length.Inch" id="Refinishing_Room_Length_Inch" class="floor-text" />Inch

    <label><b>Width</b></label>

    <input type="text" name="Refinishing.Room.Width.Feet" id="Refinishing_Room_Width_Feet" class="floor-text" />Ft
    <input type="text" name="Refinishing.Room.Width.Inch" id="Refinishing_Room_Width_Inch" class="floor-text" />Inch<br />

    <a href="#">Add Room</a> / <a href="#">Remove Room</a>
</div>

我想在单击“添加房间”链接时添加“

”的内容。 怎么办？

【问题讨论】：

• 代码请求的味道:)
• 定义“添加” - 你的意思是发布到服务器或添加到 DOM 的其他地方或..？
• 我只想添加 Room 的内容。我正在 MVC 中开发它。并且代码是在MVC4的视图中编写的。
• Everything you could ever need to know about jQuery is found in their api documentation. For instance, here's the .append() method
• 我只想在点击 href 链接“添加房间”时添加内容。

Answer 1

尝试使用.clone() 和.append()

 $('body').on('click','a.addroom', function(e) {
     e.preventDefault();

     var $cloned = $('.form-inline:eq(0)').clone();

     $('body').append($cloned);

 }); 


 $('body').on('click', 'a.removeroom' ,function(e) {
     e.preventDefault();
     $(this).closest('div').remove();
}); 
<a href="#" class="addroom">Add Room</a>

这里 div 的内容被克隆并附加到 body..

WORKING FIDDLE