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这会清空into的孩子new_div_element，然后附加new_div_element到现在为空的node。

它不使用innerHTML，因此您不会破坏正在传输的元素的任何状态。

仅供参考，您无法正常工作的原因是您的循环正在递增i，但是.childNodes当您执行.appendChild.

由于.childNodes是一个实时列表，因此当您将其中一个项目移动到其他位置时，它的内容会更新。结果，在删除第一个孩子之后，第二个孩子在该索引处取而代之。由于您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 回答