javascript - 親要素を削除して子を再追加する

Question

私は順不同のリストであるナビゲーションを持っています.これは私が従う/私のjQueryプラグインが正しく動作するために従わなければならない単純な構造です.したがって、このコード構造が必要になります.

<nav id="mp-menu" class="mp-menu">
<div class="mp-level">
    <ul id="demo1" class="nav">
        <li>
            <a href="#">Devices</a>
            <div class="mp-level">
            <h2>Devices</h2>
            <a class="mp-back" href="#">back</a>
            <ul>
                <li><a href="#">Mobile Phones</a></li>
                <li><a href="#">Televisions</a></li>
                <li><a href="#">Cameras</a></li>
            </ul>
            </div>
        </li>
        <li>
            <a href="#">Magazines</a>
            <div class="mp-level">
                <h2>Magazines</h2>
                <a class="mp-back" href="#">back</a>
                <ul>
                    <li><a href="#">National Geographic</a></li>
                    <li><a href="#">Scientific American</a></li>
                </ul>
            </div>
        </li>
        ...
   </ul>
</div>
</nav>

フォールバックを提供する必要があり、上記とは異なる構造を使用する必要がある別の jQuery プラグインを選択しました。クラス名の DIV を削除する必要がありますが、子リスト.mp-levelを含むすべての順序付けられていないリストを保持します。.mp-level

結果は、見出しと DIV のない順序付けられていないリストになります。以下の私のコードは正しい要素を削除していますが、私の問題は子の順序付けられていないリスト (特にレベル 2) を再挿入することです:

$( "#demo1 h2, .mp-back" ).remove();
$( ".mp-level ul li .mp-level" ).detach();
$( ".mp-level ul li" ).append('.mp-level ul li .mp-level ul');

親を削除した後、子 UL を再挿入する方法について誰かアドバイスがありましたか?