如何在两个特定元素之间替换一些 HTML 标签？

Question

我有这个 HTML：

 <div class="header">A subject</div>
    <span class="start"></span>
    <table>
     <tbody>
      <tr><td>1</td></tr>
     </tbody>
    </table>
    <p>a paragraph</p>
    <span class="end"></span>
    <div class="footer">a note</div>

我还有一个变量，其中包含一些其他标签，如下所示：

var html = "<section> something <a href="#">my link</a> </section>;

我要做的就是用html 变量替换.start 和.end 之间的所有内容。我该怎么做？

这是预期的结果：

 <div class="header">A subject</div>
    <span class="start"></span>
    <section> something <a href="#">my link</a> </section>
    <span class="end"></span>
    <div class="footer">a note</div>

---

由于没有任何包装器，所以我不能使用.html() 或.replaceWith() 函数。有什么想法吗？

Answer 1

由于您使用的是 jQuery，您可以使用.nextUntil() 方法。它允许您选择一系列元素，直到指定为方法参数的元素。

$('.start').nextUntil('.end') 将选择从.start 到.end 的每个元素（无论这听起来多么悦耳）。

之后，您可以删除选定的元素并使用.before() 添加所需的 HTML。

$('.start').nextUntil('.end').remove();
$('.end').before(myHTMLVariable);

（供参考：https://api.jquery.com/nextUntil/）

Answer 2

为此，您可以选择.start，然后使用nextUntil() 选择它和.end 之间的元素，然后再删除它们。然后就可以在.start之后插入新的内容了，像这样：

$('.start').nextUntil('.end').remove();
$('<section> something <a href="#">my link</a></section>').insertAfter('.start');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">A subject</div>
<span class="start">START</span>
<table>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>
<p>a paragraph</p>
<span class="end">END</span>
<div class="footer">a note</div>