將div添加為節點的唯一子節點

Question

我試圖將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]);        
}

請有人可以幫我嗎？

Answer 1

像這樣做：

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的子node清空為new_div_element ，然后將new_div_element附加到現在為空的node 。

它不使用innerHTML ，因此您不會破壞正在傳輸的元素的任何狀態。

---

僅供參考，你的工作不正常的原因是你的循環正在遞增i ，但是當你執行.appendChild時，你將從.childNodes列表中刪除元素。

由於.childNodes是實時列表，因此當您將其中一個項目移動到其他位置時，其內容會更新。 結果，在移除第一個孩子之后，第二個孩子取代該指數。 由於你的i遞增，它跳過了在列表中重新定位的那個。

Answer 2

如果您願意使用jQuery，它有一個wrapAll方法可以為您執行此操作。

$(node).children().wrapAll('<div id="oaa_web_accessibility_highlight"></div>');