Question

I have the following HTML structure:

<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>

And I want to add a new li in the first ul, like this:

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);

I just wanted it to be added in the first ul, but it adds the two ul’s.

Answer 1

You can use the child selector:

$(".one > ul").append(html);

Or the :first selector:

$(".one ul:first").append(html);

Note that you are overwriting the values instead of concatenating them, you should += instead of =;

var html = '';
html += '<li>';
html += '<span>1</span>';
// ...
html += '</li>';