请问如何将html中两个或多个具有相同层次结构和内容的ul或li合并在一起？

合并前的HTML内容如下：

<ul class="ul1">
    <li>
        <p>中国</p>
        <ul class="ul2">
            <li>
                <p>广东</p>
                <ul class="ul3">
                    <li>
                        <p style="color: red">G123456789</p>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<ul class="ul1">
    <li>
        <p>中国</p>
        <ul class="ul2">
            <li>
                <p>广东</p>
                <ul class="ul3">
                    <li>
                        <p style="color: red">G888888888</p>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

求一算法将上述内容合并成入下效果：

<ul class="ul1">
    <li>
        <p>中国</p>
        <ul class="ul2">
            <li>
                <p>广东</p>
                <ul class="ul3">
                    <li>
                        <p style="color: red">G123456789</p>
                    </li>
                    <li>
                        <p style="color: red">G888888888</p>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>