javascript 如何在现有 div 中附加 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19159075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to append div in existing div?
提问by Java Man
Hello I am creating website using php.In that i have one form which is for add appointment. in that page user can fillup date, start Time and End time of appointment. but if user want to add extra date and time he/she can also add. for that i have write following code.
您好，我正在使用 php.In 创建网站，我有一个用于添加约会的表单。在该页面用户可以填写约会的日期、开始时间和结束时间。但如果用户想添加额外的日期和时间，他/她也可以添加。为此，我编写了以下代码。
<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>
for onlick event i have create on function.
对于 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>
this works fine but when when i click on more then previous selected data erased. data should be as it is when i press more to add extra time. kidnly help me how to solve this problem? Thank you in advance.
这工作正常，但是当我点击更多然后以前选择的数据被删除时。当我按更多键以添加额外时间时，数据应该保持原样。顺便帮助我如何解决这个问题？先感谢您。
回答by Sunil Verma
you can use clone method for ex : this example is for a tr to append on table whose id is vtable.
您可以对 ex 使用 clone 方法：此示例是将 tr 附加到 id 为 vtable 的表上。
$(document).ready(function () {
$("#more").click(function() {
$(".vtable tr:last").clone().find("input, select").each(function(){}).end().appendTo(".vtable");
});
});
where more is the id of button clicked to create div. Please note this is for demonstration purpose
其中 more 是单击以创建 div 的按钮的 id。请注意这是为了演示目的
also as per your question your previous data is erasing bcoz you are using + to insert html in your code rather than this you need to use append or clone method so it will always append the data at the end, also you can pass different ids to each html appended.
同样根据您的问题，您之前的数据正在擦除 bcoz 您正在使用 + 在代码中插入 html 而不是这个，您需要使用 append 或 clone 方法，以便它始终将数据附加到最后，您也可以将不同的 id 传递给每个 html 附加。
回答by epascarello
The problem here is innerHTML does not remember values. You should not be using innerHTML to add new content if you need to maintain state. You need to use appendChild.
这里的问题是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);
}
Now since you labeled it jQuery it is as simple as
现在既然你给它贴上了 jQuery 的标签，它就像
function addTime() {
var timeDiv='<div><table><tr><td>Date</td></tr></table></div>';
$("#date").append(timeDiv);
}
Now if you keep calling addTimeyou will be adding multiple elements with the same id. You might want to either drop the ids or add a counter to the ids.
现在，如果您继续调用，addTime您将添加多个具有相同 ID 的元素。您可能想要删除 id 或向 id 添加计数器。
回答by Outlooker
Try changing
尝试改变
div.innerHTML = div.innerHTML + timeDiv;
div.innerHTML = div.innerHTML + timeDiv;
to
到
$('#date').append(timeDiv);
for more detail checkout the following link
有关更多详细信息，请查看以下链接
回答by Chris Charles
jQuery is a good way to do this:
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);
}
