如何在现有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/