Как я могу вставить подменю в элемент «ul» без изменения родительского «ul» или повлиять на его дочерние элементы?

Question

У меня есть элемент <ul>, который содержит несколько подменю, и я хочу вставить элемент <ul> в элемент <li> внутри родительского элемента и увеличить глубину родительского меню, не влияя на братьев и сестер нового элемента или внести любые другие изменения в родительский элемент.

Вот мой HTML до сих пор:

<ul id="main-menu"> 
    <li><a href="/home">Home</a></li> 
    <li> 
    <a href="/lorem">lorem</a> 
    <ul class="sub-menu"> 
     <li><a href="/ipsum">ipsum</a></li> 
     <li><a href="/1"><i class="icon-credit-card"></i> Pricing Tables</a></li> 
     <li><a href="/2"><i class="icon-gift"></i> Icons</a></li> 
    </ul> 
    </li> 
    <li><a href="/grid">Grid</a></li> 
    <li><a href="/slick">Slick</a></li> 
    <li><a href="/slick_in_grid">Slick in Grid</a></li> 
    <li><a href="/video">Videotest</a></li> 
    <li><a href="/videogrid">Video in Grid</a></li> 
    <li><a href="/audiogrid">Audio in Grid</a></li> 
    <!--- here the new li ul --> 
    <li><a href="/formgrid">Form in Grid</a></li> 
    <li> 
    <a href="/langsub">langsub</a> 
    <ul class="sub-menu"> 
    <li><a href="/emt"><i class="icon-wrench"></i>EinganzlangerMenutext</a></li> 
    <li><a href="/11"><i class="icon-credit-card"></i> Pricing Tables</a></li> 
    <li><a href="/12"><i class="icon-gift"></i> Icons</a></li> 
    <li><a href="/13"><i class="icon-file-alt"></i> Pages</a></li> 
    </ul> 
    </li> 
    <li> 
    <a href="/blog">Blog</a> 
    <ul class="sub-menu"> 
     <li><a href="/21">Large Image</a></li> 
     <li><a href="/22">Medium Image</a></li> 
     <li><a href="/23">Masonry</a></li> 
     <li><a href="/24">Double Sidebar</a></li> 
     <li><a href="/25">Single Post</a></li> 
    </ul> 
    </li> 
    <li><a href="/contact">Contact</a></li> 
<!--- here the new /ul /li --> 
</ul> 

Это мой JavaScript (JQuery):

$("#main-menu").each(function() { 
    //check region to move 
    var left = 0; 
    var child = 0; 
    var last_child = 0; 
    var overflow = false; 
    $("#main-menu > li").each(function() { 
    if ($(this).offset().left > left) { 
     left = $(this).offset().left; 
     child = $(this).index(); 
     alert($(this).attr("class") + $(this).html() + $(this).offset().left); 
    } else { 
     overflow = true; 
    } 
    last_child = $(this).index(); 
    }); 
    // insert li/ul and its closing at the end 
    if (overflow) { 
    $("#main-menu > li").each(function() { 
     if ($(this).index() == child) { 
     $(this).before("<li><a href=\"#\">weitere...</a><ul class=\"sub-menu\">"); 
     } 
     if ($(this).index() == last_child) { 
     $(this).after("</ul></li>"); 
     } 
    }); 
    } 
}); 

И это пример результата я ищу:

<ul class="before_change"> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
    <li>four</li> 
    <li>five</li>    
</ul> 
<ul class="after_change"> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
    <li> 
    new 
    <ul> 
     <li>four</li> 
     <li>fife</li>    
    </ul> 
    </li> 
</ul> 

Answer 1

Мне просто пришлось удалить и заменить элементы вместо того, чтобы пытаться изменить необработанный HTML.
Это законченная JS код:

$("#main-menu").each(function() { 
    //check region to move and clone it 
    var left = 0; 
    var child = 0; 
    var last_child = 0; 
    var overflow = false; 
    var objects = Array(); 
    $("#main-menu > li").each(function() { 
    if ($(this).offset().left > left) { 
     left = $(this).offset().left; 
     child = $(this).index(); 
    } else { 
     overflow = true; 
    } 
    // clone 
    objects[$(this).index()] = $(this); 
    last_child = $(this).index(); 
    }); 
    if (overflow) { 
    $("#main-menu > li").each(function() { 
     clone = '' 
     for (o = child; o <= last_child; o++) { 
     clone += '<li>' + objects[o].html() + '</li>'; 
     } 
     if ($(this).index() == child) { 
     $(this).replaceWith("<li><a href=\"#\">weitere...</a><ul class=\"sub-menu\"><li>" + clone + "</li></ul></li>"); 
     } 
     if ($(this).index() > child) { 
     $(this).remove(); 
     } 
    }); 
    } 
});