如何在現有div中附加div？

Question

你好，我正在使用PHP創建網站。我有一種形式是用於添加預約。在該頁面中，用戶可以填寫日期，開始時間和結束時間。但如果用戶想添加額外的日期和時間，他/她也可以添加。爲此我寫下面的代碼。

<div id="date"> 
    <table> 
    <tr> 
    <td> 
    Date<br> 
    <input type="text" id="dateid"> 
    </td> 
    <td>startTime:<select><option value="00:00">00:00</option></select></td> 
    <td>EndTime:<select><option value="00:00">00:00</option></select></td> 
    <td><input type="button" value="Extra Time" onClick="addTime()"></td> 
    </tr> 
    </table> 
    </div> 

對於onlick事件我創建了函數。

<script> 
    function addTime() 
{ 
var timeDiv='<div id="extraTimeDiv"><table><tr><td>Date<br><input type="text" id="extradate"></td><td >Start Time</td><td><select id="addstart" name="addstart"><option value="00:00"> 00:00</option><option value="00:30"> 00:30</option><option value="01:00"> 01:00</option><option value="01:30"> 01:30</option><option value="02:00"> 02:00</option> EndTime:</td><td ><select id="addend" name="addend"><option value="00:00"> 00:00</option><option value="00:30"> 00:30</option><option value="01:00"> 01:00</option><option value="01:30"> 01:30</option><option value="02:00"> 02:00</option></select></td><td></td></tr></table></div>' 

    var div = document.getElementById('date'); 
div.innerHTML = div.innerHTML + timeDiv; 

    } 
</scritp> 

這工作得很好，但是當我點擊更多，然後上次選擇的數據擦除。數據應該像當我按更多時間添加額外時間那樣。 kidnly幫助我如何解決這個問題？先謝謝你。

Answer 1

您可以使用克隆方法，例如：這個例子是一個TR對錶id爲虛函數表追加。

$(document).ready(function() { 
    $("#more").click(function() { 
     $(".vtable tr:last").clone().find("input, select").each(function(){}).end().appendTo(".vtable"); 
    }); 
}); 

其中更多是點擊創建div的按鈕的id。請注意，這是出於演示的目的

---

也按你的問題bcoz您使用+在您的代碼中插入HTML，而不是這一點，你需要使用附加或克隆的方法，因此將永遠是你以前的數據擦除在最後附加數據，也可以將不同的id傳遞給每個附加的html。

Answer 2

jQuery是做到這一點的好辦法：

<script> 
    var timeDiv='<div id="extraTimeDiv"><table><tr><td>Date<br><input type="text" id="extradate"></td><td >Start Time</td><td><select id="addstart" name="addstart"><option value="00:00"> 00:00</option><option value="00:30"> 00:30</option><option value="01:00"> 01:00</option><option value="01:30"> 01:30</option><option value="02:00"> 02:00</option> EndTime:</td><td ><select id="addend" name="addend"><option value="00:00"> 00:00</option><option value="00:30"> 00:30</option><option value="01:00"> 01:00</option><option value="01:30"> 01:30</option><option value="02:00"> 02:00</option></select></td><td></td></tr></table></div>' 

    var div = $('div#date'); 
    div.append(timeDiv); 

} 

Answer 3

這裏的問題是innerHTML不記得值。如果您需要維護狀態，則不應使用innerHTML來添加新內容。你需要使用appendChild。

function addTime() {  
    var timeDiv='<table><tr><td>Date</td></tr></table>'; 
    var div = document.createElement("div"); 
    div.innerHTML = timeDiv; 
    document.getElementById('date').appendChild(div); 
} 

現在，因爲你打成它的jQuery它很簡單，只要

function addTime() {  
    var timeDiv='<div><table><tr><td>Date</td></tr></table></div>'; 
    $("#date").append(timeDiv); 
}  

現在，如果你一直在打addTime你會加入具有相同ID的多個元素。您可能希望刪除ID或向ID添加計數器。

Answer 4

嘗試改變

div.innerHTML = div.innerHTML + timeDiv;

到

$('#date').append(timeDiv); 

更多細節收銀臺下面的鏈接

http://api.jquery.com/append/