删除div而不删除普通Javascript中的内容[重复]

Question

任何人都可以帮助我如何删除

div

标签而不删除

JavaScript

中的内容吗？

这是我的 html，我需要从中删除所有 div 标签：

<div id="id1" class="someclass">
  <p>some text
    <label> Test content </label>
  </p>
  <div id="id2" style="overfolw:scroll">
    <span>some text</span>
    <div id="level3">
      <label> Test content </label>
      <a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
    </div>
  </div>
</div>

预期输出如下所示。

<p>some text
   <label> Test content </label>
</p>
<span>some text</span>
<label> Test content </label>
<a href=https://twitter.com/realDonaldTrump/status/882186896285282304 target=_blank rel=noopener>creepiness</a>

Answer 1

使用纯java脚本：

var divs=document.getElementsByTagName('div');
var counter = divs.length-1;
for(i=counter;i>=0;i--){
 divs[i].outerHTML = divs[i].innerHTML;
}

<div id="id1" class="someclass">
  <p>some text
    <label> Test content </label>
  </p>
  <div id="id2" style="overfolw:scroll">
    <span>some text</span>
    <div id="level3">
      <label> Test content </label>
      <a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
    </div>
  </div>
</div>

使用 jQuery unwrap():

$(document).ready(function(){
  $('div').contents().unwrap();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1" class="someclass">
  <p>some text
    <label> Test content </label>
  </p>
  <div id="id2" style="overfolw:scroll">
    <span>some text</span>
    <div id="level3">
      <label> Test content </label>
      <a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
    </div>
  </div>
</div>

Answer 2

使用尖端技术，例如可迭代节点列表和

replaceWith

，使用普通的 DOM API 非常简单：

for (const div of document.querySelectorAll("div"))
// alternatively: Array.from(document.getElementsByTagName("div"))
    div.replaceWith(...div.childNodes);

Answer 3

您可以使用

unwrap

功能。

 $('div').children().unwrap();

如果你想用纯 JavaScript 来做。您可以使用

document.getElementsByTagName("div")

获取所有 div 的列表，但您需要以相反的顺序解开这些 div。这是一个

nodelist

，因此

reverse()

对其不起作用，因此您可以首先对其使用

[].slice.call()

，它会为您提供一个数组，然后您可以反转它。然后在数组中解开每个元素。

你可以这样做：

var elements = [].slice.call(document.getElementsByTagName("div"), 0).reverse();
elements.forEach(function(el){
    el.outerHTML = el.innerHTML;
});

<div id="id1" class="someclass">
  <p>some text
    <label> Test content </label>
  </p>
  <div id="id2" style="overfolw:scroll">
    <span>some text</span>
    <div id="level3">
      <label> Test content </label>
      <a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
    </div>
  </div>
</div>