Javascript 如何在现有div中追加div？

您好，我创建的网站使用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>

日期

开始时间：00:00
完时间:00:00

对于onlick事件，我有create on函数

   <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>

函数addTime（）
{
var timeDiv='Date
开始时间00:00 00:30 01:00 01:30 02:00结束时间：00:00 00:30 01:00 01:30 02:00'
var div=document.getElementById（'date'）；
div.innerHTML=div.innerHTML+timeDiv；
}

---

这可以正常工作，但当我点击更多之前选定的数据时，数据被擦除。当我按“更多”以添加额外时间时，数据应保持原样。你能帮我解决这个问题吗？先谢谢你

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);

}

var timeDiv='Date
开始时间00:00 00:30 01:00 01:30 02:00结束时间：00:00 00:30 01:00 01:30 02:00'
var div=$（'div#date'）；
div.append（timeDiv）；
}

---

您可以为ex使用clone方法：此示例用于将tr附加到id为vtable的表上

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

其中“更多”是单击以创建div的按钮的id。请注意，这是出于演示目的

---

---

另外，根据您的问题，您以前的数据正在删除bcoz，您正在使用+在代码中插入html，而不是使用此方法。您需要使用append或clone方法，这样它将始终在末尾追加数据，您还可以向每个追加的html传递不同的ID。

这里的问题是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);
}

函数addTime（）{
var timeDiv='Date'；
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（）{
var timeDiv='Date'；
$（“#日期”）。追加（timeDiv）；
}    

现在，如果您继续调用

addTime

，您将添加具有相同id的多个元素。您可能需要删除id或为id添加计数器

试试换衣服

div.innerHTML=div.innerHTML+timeDiv

到

有关更多详细信息，请查看以下链接

您是使用jQuery代码，还是只使用jQuery标记？date是一个文本框，而不是div..@Mooseman。。我只写这段代码。告诉我怎么做？@epascarello我已经用相同的id编辑了两个元素，仍然不起作用。
$('#date').append(timeDiv);