Question

我有一个列表，我不想通过javascript中断添加标题：

自：

<ul>
    <li>1</li>
    <li class="afterthis">2</li>
    <li>3</li>
    <li>4</li>
</ul>

要：

<ul>
    <li>1</li>
    <li class="afterthis">2</li>
</ul>
<h1>Title</h1>
<ul>
    <li>3</li>    
    <li>4</li>    
</ul>

我觉得这很容易：$(".afterthis").after("</ul><h1>Title</h1><ul>");

但它没有关闭列表，它会移动结束标记，它会插入<h1>Title</h1><ul></ul>

要查看问题，请参阅此jsfiddle http://jsfiddle.net/Fx74b/14/

Answer 1

Jquery仅使用有效的HTML，而不是字符串部分。

因此，您无法将损坏的html传递给after()方法。

您需要拆分自己的ul并在其间添加其他元素。

$(document).ready(function() {
    var splitelement = $(".afterthis"); // find the element which will be used for the split
    var ul = splitelement.parent(); // find the relative ul
    var newul = $('<ul>'); // create the new ul that will follow the existing one

    newul.append( splitelement.nextAll() ); // move the rest of the li elements to the new ul
    ul.after("<h1>Title</h1>").next().after(newul); // insert the title and then then ul
});

演示 http://jsfiddle.net/gaby/ph5UM/

Answer 2

据我所知.after需要一个适当的DOM文本或对象的参数 $(</ul><h1>Title</h1><ul>)从结束标记开始，因此忽略</ul>。 <ul>未完成，jquery为<ul>

添加了结束标记

奇怪的jQuery插入问题

2 个答案: