1

jQuery .appendToメソッドを使用して2 つの異なる親 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が実際に正しく移動されたかどうかはわかりません。これはすべてのブラウザーで発生し、prependTo、append、inserAfter、clone など、いくつかの異なる jQuery メソッドを試しました。すべて同じ結果です。はい、指定された div は存在します。明らかに、私はこれを熱狂的にグーグル検索しましたが、私が見つけることができるのはこれだけです。これは実際には質問に答えません: JQuery append 要素はすべての html dom 要素を削除します

ここで何が間違っているのでしょうか。どんな助けでも大歓迎です。

実際のコードと失敗する場所については、以下のリンクを参照してください。フッター アイコンの 1 つをクリックし、もう一度同じボタンを押して、問題が表示されることを確認します。

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ページの要素のコンテンツを作成するために使用しています。

これで、[統計] アイコンをクリックすると (2 回目)、DIV がページの別の部分に再配置されます。これにより、SCRIPT ブロックが再度実行されます。実際の例 したがって、document.write実行します。その結果、ページが破棄されます。

ルールはdocument.write、ページ読み込みイベントの後に が実行されると、ページが破棄され、 に提供された新しいコンテンツに置き換えられるというものdocument.writeです。

を避けることをお勧めしますdocument.write。代わりに、DOM 対応のイベント ハンドラーでコンテンツを生成し、jQuery を使用してページの要素を検索し、そのコンテンツを設定します。

于 2012-06-04T00:00:06.663 に答える