1

次のような単純なHTMLがあります。

<body>
  <form action="#">
    <button type="button" onclick="changeDOM();">Change DOM</button>
  </form>
  <table>
    <tr id='a'><td>a</td></tr>
    <tr id='b'><td>b</td></tr>
    <tr id='c'><td>c</td></tr>
  </table>
</body>

changeDOMテーブルの一番上の行を一番下の行にプッシュし、残りの行を「バブルアップ」する関数が必要です。私はこのようにそれをやってみました：

function changeDOM() {
    var nextRow = currentRow.nextSibling;
    currentRow.className='';
    nextRow.nextSibling = currentRow;
    currentRow = nextRow;
    currentRow.className='highlight';
    return true;
}

var currentRow;
currentRow = document.getElementById('a');
currentRow.className='highlight';

残念ながら、デバッガーをステップスルーすると、nextSibling期待どおりに設定されていないことに気付きました。私はオンラインでいくつかの同様のコードを見ましたが、実際にはノードを削除して追加します。2つの質問：

  1. DOM要素を作成および破棄せずにDOM要素の位置を変更する方法はありますか？

  2. （1）の答えが「はい」の場合、どうすればよいですか？

4

2 に答える 2

0

jQueryを使用する場合は、それを行うための簡単な関数があります。次の例を確認できます。

http://api.jquery.com/detach/

于 2012-08-07T13:48:07.257 に答える
0

.removeChildメソッドは実際に.appendChildは何も削除または作成せず、ノードとその親との関連付けを確立および削除するだけです。これらのメソッドを使用すると、必要な処理を正確に実行できます。つまり、オーバーヘッドなしで要素を移動します。

MDNドキュメントが.removeChild言うように：

var oldChild = element.removeChild(child)

削除された子ノードはまだメモリに存在しますが、DOMの一部ではなくなります。oldChildオブジェクト参照を介して、コードの後半で削除されたノードを再利用できます。

実際、要素は1つの親しか持てないため、を使用する.appendChildと、他のすべての同様の方法で前の場所から自動的に削除されます。したがって、要素.removeChildをまったく使用せずに移動できます。

于 2012-08-07T14:55:33.990 に答える