剥离父组件标签

Question

我已经在HTML模板中声明了<table>元素，并将custom-component放在其行中，如下所示：

<table>
  <thead>
    ....
  </thead>
  <tbody>
    <tr>
      <CustomComponent></CustomComponent>
    </tr>
  </tbody>
</table>

CustomComponent包含一些<td>。
我想剥离<CustomComponent></CustomComponent>，以便内部<td>是<tr>的第一个孩子。

Answer 1

我尝试并测试了以下内容，希望它可以正常工作。

   // select element to unwrap
    var el = document.getElementsByTagName("CustomComponent");

    // get the element's parent node, if it returns array then take the first index
    var parent = el[0].parentNode;

    // move all children out of the element
    while (el[0].firstChild) {
        parent.insertBefore(el[0].firstChild, el[0]);
    }

    // remove the empty element
    parent.removeChild(el[0]);

快乐编码！