javascript - Javascript で appendChild() を制御できません

Question

Javascript でページを分割する際に問題が発生しました。17 個の p タグを 1 つの div タグに移動したいと考えています。したがって、次のような 34 個の p タグがあります。

<p>1</p> <!-- Each p tag have the value is the number of the p tag -->

そして、私はこのJavascriptコードを持っています:

  var p = document.getElementsByTagName("p");
  var div = document.createElement("div");
  for(i=0;i<17;i++){
    div.appendChild(p[i]);
  }
  document.getElementsByTagName("body")[0].appendChild(div);

そして、私が受け取った結果は div タグにあります。17 個の p タグがありますが、これらの p タグの値は奇数です。つまり、次のようになります。

これはデモです: http://jsbin.com/eyivic

それまでの間、div タグの p タグを次のようにしたいと考えています。

それで、問題は何ですか？どうすれば修正できますか？本当にありがとうございます！

score 3 · Accepted Answer

appendChilddivを作成すると、p配列の要素が削除されます。これにより、この「オッズのみ」の動作が発生します。4 つの p 要素があるとします。

1, 2, 3, 4

appendChildfromを作成するp[0]と、期待どおりに p 要素が移動しますが、リストは次のようになります。

2, 3, 4

p[1]あなたは今、それが要素 2 であると予想していたを指していますが、代わりに要素 3 になります。

それを修正するには、いつでも指し示すことができp[0]、期待どおりに動作します。

score 2 · Accepted Answer

ループは次のようになります。

for(i=0;i<p.length;i++){
    var newNode = p[i].cloneNode(true);
    div.appendChild(newNode);
  }

appendChild を実行すると、配列から削除されます。クローニングはあなたの問題を解決します。

@memosdp は、元の親ノードからこれらの p 要素を実際に削除したいことを指摘しました。その場合、ループが終了したら、古い親ノードをクリアします。

// your loop is before this
var node = p[0].parentNode;
while (node.hasChildNodes()) {
    node.removeChild(node.lastChild);
}

javascript - Javascript で appendChild() を制御できません

2 に答える 2

Related

Reference