javascript - jQuery before()/after() 无法与 HTML 正常工作？

Question

我遇到了一个奇怪的问题。我有一个包含如下链接的列表:

<ul class="sub-navigation">
    <li><a href="">a</a></li>
    <li><a href="">b</a></li>
    <li><a href="">c</a></li>
    <li><a href="">d</a></li>
    <li><a href="">e</a></li>
</ul>

我想要做的是通过在第三个列表项之后插入关闭标签然后打开标签，使 jQuery 将列表分成两部分。所以我就这样:

$('.sub-navigation li').eq(2).after('google');

它正确插入文本，我得到:

<ul class="sub-navigation">
    <li><a href="">a</a></li>
    <li><a href="">b</a></li>
    <li><a href="">c</a></li>google
    <li><a href="">d</a></li>
    <li><a href="">e</a></li>
</ul>

这是正确的，但是当我尝试像这样插入实际标签时:

$('.sub-navigation li').eq(2).after('</ul><ul class="sub-navigation">');

它反转了它们o_O

<ul class="sub-navigation">
    <li><a href="">a</a></li>
    <li><a href="">b</a></li>
    <li><a href="">c</a></li><ul class="sub-navigation"></ul>
    <li><a href="">d</a></li>
    <li><a href="">e</a></li>
</ul>

为什么会这样呢？不能before()只需插入我提供的原始 HTML 即可？ 如果我尝试仅插入 </ul>它消失了...

提前致谢!

Answer 1

诸如 before() 和 after() 之类的 jQuery 方法可操作浏览器的 DOM 树。
DOM 包含完整 HTML 元素。您不能放入一半的标签。

相反，您需要操作整个标签:

$('.sub-navigation li:eq(2)').nextAll().remove().appendTo(
    $('<ul class="sub-navigation">').insertAfter($('.sub-navigation'))
)