Question

I need to cut a list into two pieces with JQuery. Suppose I have the following list:

<ul>
  <li>item</li>
  <li>item</li>
  <li id="POI">item</li>
  <li>item</li>
  <li>item</li>
</ul>

I have tried using:

$("li#POI").after("</ul><ul>");

But it seems JQuery thinks I’m creating malformed HTML and does not insert the closing tag. instead it gives me this output:

<ul>
  <li>item</li>
  <li>item</li>
  <li id="POI">item</li>
  <ul></ul>
  <li>item</li>
  <li>item</li>
</ul>

Please advise a way that helps me get the following output with JQuery:

<ul>
  <li>item</li>
  <li>item</li>
  <li id="POI">item</li>
</ul>
<ul>
  <li>item</li>
  <li>item</li>
</ul>

Many thanks.

Answer 1

var splitPoint = $('#POI');
var list = splitPoint.parent();

$('<ul>').append(splitPoint.nextAll()).insertAfter(list);

If your list can be identified by an id or some other selector, then this can be simplified to:

$('<ul>').append($('#POI ~ li')).insertAfter('#listID');