childnode of li element gives [#text, <ul>​…​</ul>​, #text]

Question

Here I create a chat conversation.

The child nodes of the li element with id="topOfStack" i.e.

document.querySelector('#topOfStack').childNodes

results with:

[#text, <ul>​…​</ul>​, #text]

The HTML code for the my problem is below

<div id="container">
    <ul id="chat">
        <li class="right">
            <ul>
                <li><span>Hello</span></li>
                <li><span> What are you doing?</span></li>
            </ul>
        </li>


        <li class="left" id="topOfStack">
            <ul>
                <li><span>Watching Movie</span></li>
                <li><span>u?</span></li>
            </ul>
        </li>


    </ul>
</div>

But when I dynamically create a new "li" element and append to the chat(ul element) with id="topOfStack removed from the previous one and added to the newly appended element, the child nodes are only [<ul>​…​</ul>​].

Why are #text added by default? or what role do they play?

Answer 1

Those text nodes represent text to the left and right of your ul tags. They're supposed to be there to signify that text. When you dynamically create an <li> tag with just a <ul> tag in it, that text isn't there. You could use .children instead of .childNodes to get just the elements:

document.querySelector('#topOfStack').children; //HTMLCollection: [<ul>...</ul>]