jQuery appendTo 删除所有 DOM 元素？

Question

我正在尝试使用 jQuery .appendTo 方法在两个不同的父 div 之间移动子 div 元素，但是当代码执行时，页面变为空白并且 所有元素都已从 DOM 中删除。剩下的就是标签内的纯文本。这就是页面的布局方式（但当然不像这个例子那么简单。对于实际站点，请参见下面的链接）：

 <div id="flip-container">
    <div id="flip-card">

      <div class="front face" id="frontPage">
      <div id="start"> text content...</div>
      <div id="about"> text content...</div>
      </div>


      <div class="back face" id="backPage">
      <div id="references"> text content... </div>
      <div id="contact"> text content... </div>
      </div>


    </div>
 </div>

我使用 jQuery 使用 appendTo 方法在父正面/背面 div 之间移动子 div：

 $("#references").appendTo($("#frontPage"));

仅此代码有效，这只是为了让您了解实际站点的布局方式。

当上面的代码被执行时，所有的 div 都会被彻底清除，只留下 body 标签和 div 内容。因此，我无法判断 div 是否真的被正确移动了。这发生在所有浏览器中，我尝试了几种不同的 jQuery 方法，例如 prependTo、append、 inserAfter 和克隆。所有的结果都是一样的。是的，指定的 div 确实存在。显然，我已经疯狂地用谷歌搜索了这个，但我能找到的只是这个，它真的没有回答这个问题：JQuery append element removes all html dom elements

那么这里出了什么问题，我错过了什么？非常感谢任何帮助。

对于实际的代码以及失败的地方，请访问以下链接。 单击其中一个页脚图标，然后再次按相同以查看问题出现。

http://utvecklingpunkten.se/list2LS/iscroll.html

Answer 1

查看你的源代码：

<div id="statisticsDiv" class="innerPages">
  <script> for(i=0;i<50;i++) {document.write("statistics "+i+"<br>"); }</script>
</div>

您正在使用document.write 创建页面元素的内容。

现在，当您单击“统计”图标（第二次）时，DIV 将重新定位到页面的不同部分。 这会导致 SCRIPT 块再次执行。 Live example 因此，document.write 将执行。结果，页面将被破坏。

规则是当页面加载事件后执行document.write时，页面被销毁并替换为提供给document.write的新内容。

我的建议是避免使用document.write。相反，在 DOM-ready 事件处理程序中生成内容，并使用 jQuery 查找页面元素并设置它们的内容。