JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><img src="photo.jpg" /></li>
    <li><strong>TEXT TEXT TEXT</strong></li>
    <li><img src="another_photo.jpg" />/li>
    <li><strong>MORE TEXT TEXT TEXT</strong></li>
    <li><a href="#" onClick="alert('Hello There');">Say Hello!</a></li>
    <li>MORE STUFF</li>
    <li>YET EVEN MORE STUFF</li>
 </ul>

CSS

div {
    border: 1px solid;
}

#first_div {
    border-color: #f00;
}

#second_div {
    border-color: #00f;
}

JavaScript

var UL = $( 'ul' ),
    upperLIs = UL.find( 'li:gt(3)' ), //get list of LIs above index 4 (above 5th)
    DIV1 = $( '<div>' ).attr( 'id', 'first_div' ); //we will definitely need this first DIV

//Get the first DIV into the DOM right before the UL before any movement of UL
//Ensure same DOM placement as we started with
UL.before( DIV1 );

//Check for LIs above index 4
if( upperLIs.length )
{
    //Add those LIs to a new UL
    //which itself is added to a new DIV
    //which itself is added after DIV1
    DIV1.after(
        $( '<div>' )
            .attr( 'id', 'second_div' )
            .append(
                $( '<ul>' )
                    .append( upperLIs )
            )
    );
}

//Move the original UL to DIV1 with it's remaining 5 LIs
DIV1.append( UL );