How To Make New Div Inside List Items

I have find related answers, but not same like this question. My question is how to make new Div inside list items only on .widget-content like given below? Main HTML: Fiddle <

Solution 1:

you can do it like this

var selectedIndex = 3;
$(".widget-content li").each(function (index) {
    if (index == selectedIndex) {
        $(this).prevAll().wrapAll("<div class='new1' />");
        $(this).nextAll().andSelf().wrapAll("<div class='new2' />");
    }
});

Solution 2:

<divclass="widget-content"><ulid="ul1"></ul></div>

js: i am assuming here count is 3

window.onload = function () {
    for (var i = 0; i < 3; i++) {
        var div = document.createElement('div');
        div.className = 'row' + i;
        div.innerHTML = '<li>Test Content</li>\
    <li>Test Content</li>\
    <li>Test Content</li>';
        document.getElementById('ul1').appendChild(div);
    }

};

jsfiddle