JQuery: How to extract li items from div

Question

I have the following div that contain an unordered list and other code:

<div id="myDiv">
    <ul>
       <div id="myInnerDiv">Here is a div</div>
       <li id="oneLi">One li</li>
       <script type="text/javascript">
           // some JS code
       </script>
       <li><span class="li-item">Some content 1</span></li>
       <li><span class="li-item">Some content 2</span></li>
       <li><span class="li-item">Some content 3</span></li>
    </ul>
</div>

I want to get the HTML corresponding to the latest <li> items after the <script> tag:

<ul>
    <li><span class="li-item">Some content 1</span></li>
    <li><span class="li-item">Some content 2</span></li>
    <li><span class="li-item">Some content 3</span></li>
</ul>

or just the li item:

<li><span class="li-item">Some content 1</span></li>
<li><span class="li-item">Some content 2</span></li>
<li><span class="li-item">Some content 3</span></li>

Do you know how to reach that with jQuery?

Answer 1

You can select the elements after another element by using the Next Siblings Selector (~)

You can also use .nextAll() to achieve the same - $('#myDiv script').nextAll('li')

I've also used .clone() to safely use .wrapAll('<ul>') on the returned element without effecting the DOM

// Returns a jQuery object containing the three <li> items after script
// Then clone ( to leave DOM as is ) and wrap with <ul>
const $listElements = $('#myDiv script ~ li').clone().wrapAll('<ul>');

// Get HTML of <ul>
const listHTML = $listElements.parent().prop('outerHTML');
console.log(listHTML);

// Get HTML of just <li>
const itemHTML = $listElements.parent().html();
console.log(itemHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">
  <ul>
    <div id=" myInnerDiv ">Here is a div</div>
    <li id="oneLi ">One li</li>
    <script type="text/javascript ">
      // some JS code
    </script>
    <li><span class="li-item ">Some content 1</span></li>
    <li><span class="li-item ">Some content 2</span></li>
    <li><span class="li-item ">Some content 3</span></li>
  </ul>
</div>