JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

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

CSS

ul { list-style: disc; margin-left:20px; }
li { padding-left:10px; }

JavaScript

$(document).ready(function() {
    var splitelement = $(".afterthis");
    var ul = splitelement.parent();
    var newul = $('<ul>');
    
    newul.append( splitelement.nextAll() );
    ul.after("<h1>Title</h1>").next().after(newul);
});

/* Why does the output have the first end tag at the end??? see source from output */