將html內容動態添加到頁面

我有以下div。這需要添加每當我點擊按鈕/鏈接將html內容動態添加到頁面

<div class="add_dependent" style="display: none;"> 
      <div class="dependent_content"> 
       <span> 
        <strong>Dependent<span class="divcount"></span></strong> 
       </span><span class="delete">Delete</span> 
       <div><strong>Relationship to you</strong></div> 
       <div> 
        <input type="radio" value="0" name="relationship" class="dependent-relation" /> 
        <label>Partner</label> 
        <input type="radio" value="1" name="relationship" class="dependent-relation"/> 
        <label>Child under21</label> 
        <input type="radio" value="2" name="relationship" class="dependent-relation"/> 
        <label>dependent over21</label> 
       </div> 
       <div><strong>Date of birth</strong></div> 
       <div> 
        <input type="text" id="dependent-dob" name="dependent-dob" datepicker/> 
        <input type="hidden" id="dependent-id" name="dependent-id" /> 

       </div> 
      </div> 
     </div> 
     <a href="" id="add" ><img src="../../Content/themes/base/images/addnew_depnt.png" style="border: 0px;" alt="add dependent"></a>

最初這個div將被隱藏。每次點擊鏈接（添加依賴）時，必須動態添加此div，並且父div的div id應分配依賴+ id（1,2,3 ...）。

我已經使用下面的腳本來處理這個問題，但在dependent1中輸入的數據被克隆在後續的div中。

$("body").delegate("#add", "click", function() { 
     var total_length = $(".add_dependent").length 
     $(".add_dependent:eq(0)").clone().prependTo("#dependent-details").css("display", "inline"); 

     $(".add_dependent:last-child .divcount").append(total_length) 

     $(".divcount").each(function (index) { 
      var increment = index + 1 
      $(this).parents(".add_dependent").attr("id", "depend" + increment) 
      $(this).text(increment) 

     }); 
    })

如何添加上述html元素到現有頁面，只要我點擊添加依賴鏈接？

有沒有人可以幫助我？

來源

2013-07-22 PaRsH

有什麼問題？ – suspectus

你可以爲此創建一個jsfiddle，將很容易糾正你的問題，如果有的話:) http://jsfiddle.net – dreamweiver

每當我點擊添加依賴，這個div必須被添加到現有的div。我怎麼能做到這一點？ – PaRsH

您可以使用附加功能和模板DIV採取的HTML，並將它注入到另一個DIV呈現什麼

$("#renderDiv").append($("#templateDiv").html());

小提琴：http://jsfiddle.net/Zz6wU/2/

來源

2013-07-22 13:39:24 verbanicm

謝謝。它的工作。但我現在有另一個問題。我在那個div裏面有單選按鈕。我如何給每個組分配不同的名字。現在所有的單選按鈕名稱都設置爲「關係」。我如何解決這個問題。？ – PaRsH

你可能想看看一個javascript模板庫，我更喜歡使用handlebars（http://handlebarsjs.com/）。 – verbanicm

如果你不想使用模板，我更新了小提琴，以顯示如何循環每個div來獲取所有變量，並且可以通過這種方式發送它們。 http://jsfiddle.net/Zz6wU/3/ – verbanicm

從評論「每當我點擊添加依賴，這個div必須被添加到現有的div，我怎麼能做到這一點？：

$("#baseDiv").append($("#newDiv").html());

不知道這是你想要

來源

2013-07-22 13:34:52 EoiFirst

將html內容動態添加到頁面

回答

相關問題