Question

我有这样的HTML内容：

some of the string content <font color=blue>Test content <BR><BR><BR>
   <DIV  id='idOfTheDiv'>
     some more goes here
     <P>Test Content</P>
   </DIV>
  </font>

我想删除div而不删除它的内容，因此结果数据应该看起来像

some of the string content `<font color=blue>Test content <BR><BR><BR>`
       some more goes here


         <P>Test Content</P>
      </font>

请注意，我不想删除div的内容，我也不想添加任何不需要的HTML元素只是为了删除div。我尝试了各种技术，但目前都没有。

我试过这个替换innerHTML，但它没有用。我不能使用replaceChild，因为

<DIV  id='idOfTheDiv'>
     some more goes here
     <P>Test Content</P>
   </DIV>

是文本加HTML的组合，因此CreateTextNode不会在这里工作，因为它将所有HTML更改为纯文本。

请建议。谢谢你..

Answer 1

循环div中的元素（使用childNodes，因为它还包含文本节点，而children则不包含）。
使用insertBefore在div之前逐个放置元素。
使用removeChild删除div。

Answer 2

这样可以解决问题：

var el = document.getElementById('idOfTheDiv');

while (el.childNodes.length) {
    el.parentNode.insertBefore(el.childNodes[0], el);
}
el.parentNode.removeChild(el);

演示：http://jsfiddle.net/VG5ZF/

el.parentNode.insertBefore(el.childNodes[0], el);将第一个子节点从元素移到外面，减少了childNodes NodeList的长度。因此，在每次迭代中，el.childNodes[0]将成为下一个迭代。直到有孩子。

在不使用jquery的情况下替换HTML内容

2 个答案:

演示：http://jsfiddle.net/VG5ZF/