Javascript剥离结束html标签？

Question

我有一个由CRM（Netsuite）自动生成的网页，我不控制在相当数量的页面中生成的html。我想删除一些关闭和打开标签，以便对象在同一行中呈现，而在彼此上下相互排列。

</tr></tbody></table></td>
</tr>
<tr valign="top">
<td width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr>

我遇到的问题是，执行以下操作会破坏页面上的表单，导致所有按钮失败：

<script type="text/javascript">
  $(document).ready(function()
  {
    var bodyHtml = document.getElementById('content_area').outerHTML;
    bodyHtml = bodyHtml.replace('</tr></tbody></table></td>\n</tr>\n<tr 
      valign="top">\n<td width="100%"><table border="0" cellpadding="0" 
      cellspacing="0" width="100%"><tbody><tr>','<!-- worked -->');
    document.getElementById('content_area').outerHTML = bodyHtml;
   });
</script>

有没有另一种方法可以通过javascript删除html标签，这些标签不会影响dom的其余部分？

Answer 1

以下代码将以您的评论为例，并在content 2 td之后追加content 1 td

let contentOne = document.querySelector("table:nth-of-type(1) tr td");

let contentTwo = document.querySelector("table:nth-of-type(2) tr td");

contentOne.insertAdjacentElement('afterend', contentTwo);

tr td {
    border: 1px solid black
}

<table>
  <tr>
    <td>content 1</td>
  </tr>
</table>
<table>
  <tr>
    <td>content 2</td>
  </tr>
</table>

要注意几点，您可能想要更改选择器。如果可以，请使用ID。

其次，您可能希望在完成后清空空表/行。