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查找页面元素并设置其内容。

jQuery appendTo删除所有DOM元素？

1 个答案: