1

我正在尝试使用 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 content。因此，我无法判断 div 是否实际上已正确移动。这发生在所有浏览器中，我尝试了几种不同的 jQuery 方法，例如 prependTo、append、inserAfter 和 clone。所有的结果都是一样的。是的，指定的 div 确实存在。显然，我已经疯狂地用谷歌搜索了这个，但我能找到的只是这个，它真的没有回答这个问题：JQuery append element removes all html dom elements

那么这里有什么问题，我错过了什么？任何帮助是极大的赞赏。

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

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

4

1 回答 1

2

查看您的源代码：

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

于 2012-06-04T00:00:06.663 回答