本机 JavaScript - 删除 html 标签但将内容保留在同一个地方答案

【问题标题】：native JavaScript - remove html tag but leave contents in same place本机 JavaScript - 删除 html 标签但将内容保留在同一个地方
【发布时间】：2022-02-04 11:34:04
【问题描述】：

一些示例 html：

<section>
   <span class="unnecessary">
      this is content before a <a href="#">link</a> and after it.  I really don't need span.unnecessary and and to remove it
   </span>
</section>

在 vanilla JavaScript 中有没有一种方法可以使用 DOM 方法简单地删除 <span class="unnecessary">？

【问题讨论】：

那是该部分的唯一子项吗？你真的需要删除它还是可以只删除className？如果您提供有关您尝试解决的更高级别问题的更多详细信息会有所帮助

标签： javascript html dom

【解决方案1】：

如果您只想按班级选择

var unnecessaries = document.getElementsByClassName('unnecessary')

//start LOOP for each unnecessary element
    unnecessaries[0].outerHTML = unnecessaries[0].innerHTML
//end LOOP

如果你想通过span和class的组合来选择

var unnecessaries = document.querySelectorAll('span.unnecessary')

//start LOOP for each unnecessary element
    unnecessaries[0].outerHTML = unnecessaries[0].innerHTML
//end LOOP

【讨论】：

innerHTML 后添加 .trim() 以防它返回额外的空白。

【解决方案2】：

请试试这个

  var b = document.getElementsByTagName('span');

  while(b.length) {
  var parent = b[ 0 ].parentNode;
  while( b[ 0 ].firstChild ) {
    parent.insertBefore(  b[ 0 ].firstChild, b[ 0 ] );
  }
   parent.removeChild( b[ 0 ] );
  }

生成的html

   <section>this is content before a <a href="#">link</a> and after it.  I really 
   don't 
  need span.unnecessary and and to remove it

  </section>

【讨论】：