jquery - div ul への jQuery の挿入

Question

私は次のHTML構造を持っています:

<div class="list-comments one">
    <ul>
        <li>
            <span>1</span>
            <p class="title"><a href="#">Welcome!</a></p>
            <div class="list-subcomments" style="display: none;">
                <div class="list-comments two">
                    <ul>
                        <li>
                            <span>2</span>
                            <span style="text-align:center;">Josh</span>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</div>

そして、次のように、最初の ul に新しい li を追加したいと思います。

var html = '';
html = '<li>';
html = '<span>1</span>';
html = '<p class="title"><a href="#">Antoher Welcome!</a></p>';
html = '<div class="list-subcomments" style="display: none;">';
html = '<div class="list-comments two">';
html = '<ul></ul>';
html = '</div>';
html = '</div>';
html = '</li>';
$(".one ul").append(html);

最初の ul に追加したかっただけですが、2 つの ul が追加されます。