javascript - 如何替换两个特定元素之间的一些 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

要实现这一点，您可以选择 .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>