0

div を唯一の子としてノードに追加しようとしています。そのノードにすでに子がある場合は、それらを div の子にします。

元の DOM は次のようになります。

<a href = "">
  <span id="gsp" > </span>
  <span id="gbsp"> some text </span>
</a>

出力を次のようにしたい：

<a href = "">
  <div id="oaa_web_accessibility_highlight">  
    <span id="gsp" > </span>
    <span id="gbsp"> some text </span>
  </div>
</a>

代わりに、以下のスニペットは私に与えます:

<a href = "">
  <div id="oaa_web_accessibility_highlight">  </div>
    <span id="gsp" > </span>
    <span id="gbsp"> some text </span>
</a>

以下のスニペットを使用しようとしていますが、機能していません。

var new_div_element = this.document.createElement('div');
new_div_element.id = 'oaa_web_accessibility_highlight';
node.insertBefore(new_div_element, node.childNodes[0]);
for (var i =0; i < node.childNodes.length; i++) {  
  if (i == 0) continue;        
  node.childNodes[0].appendChild(node.childNodes[i]);        
}

誰でもこれについて私を助けることができますか？

4

2 に答える 2

2

次のようにします。

var new_div_element = document.createElement('div');
new_div_element.id = 'oaa_web_accessibility_highlight';

while (node.firstChild) {  
      new_div_element.appendChild(node.firstChild);        
}

node.appendChild(new_div_element);

これにより、 の子が に空になりnode、現在空のnew_div_elementに追加されます。new_div_elementnode

を使用しないためinnerHTML、転送される要素の状態を破壊することはありません。

参考までに、あなたが正しく機能しなかった理由は、ループがインクリメントしているためですが、実行時にリストiから要素を削除しているためです。.childNodes.appendChild

はライブ リストであるため.childNodes、アイテムの 1 つを別の場所に移動すると、その内容が更新されます。その結果、最初の子が削除された後、2 番目の子がそのインデックスで代わりになります。あなたiはインクリメントされているので、リスト内で再配置されたものをスキップします。

于 2012-10-05T19:37:17.323 に答える
0

jQuery を使用する場合は、これを行うwrapAllメソッドがあります。

$(node).children().wrapAll('<div id="oaa_web_accessibility_highlight"></div>');
于 2012-10-05T20:19:06.270 に答える