У меня есть этот HTML:

    <ul>
        <div>
            <li>a</li>
            <li>b</li>
            <li class="break">c</li>
            <li>d</li>
            <li>f</li>
        </div>
    </ul>

Что я хочу это гдеclass="break" Я хочу родителяdiv закрыл и открыл новый, так что я в конечном итоге с этим:

    <ul>
        <div>
            <li>a</li>
            <li>b</li>
        </div>
        <div>
            <li>c</li>
            <li>d</li>
            <li>f</li>
        </div>
    </ul>

Теперь я попробовал это:

$(".break").before("</div><div>");

но jQuery не работает так, как я ожидал, а вместо этого переписывает то, что я ввел, и помещает пустоеdiv вместо. Вот так:

    <ul>
        <div>
            <li>a</li>
            <li>b</li>
            <div></div>
            <li class="break">c</li>
            <li>d</li>
            <li>f</li>
        </div>
    </ul>

Итак, как я могу достичь того, что я после?