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

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

仅供参考，您的工作不正常的原因是您的循环正在递增i，但是当您执行.childNodes时，您将从.appendChild列表中删除元素。

由于.childNodes是实时列表，因此当您将其中一个项目移动到其他位置时，其内容会更新。结果，在移除第一个孩子之后，第二个孩子取代该指数。由于i递增，它会跳过已在列表中重新定位的那个。{/ p>

Answer 2

如果您愿意使用jQuery，它有一个wrapAll方法可以为您执行此操作。

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

将div添加为节点的唯一子节点

2 个答案: