li元素的childnode给出[#text， <ul> ...... </ul> ，#text]

Question

Here I create a chat conversation.

The child nodes of the li element with id="topOfStack" ie

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

Do you see the spaces from the opening <ul> back to the beginning of the line? That's all text. The parser cannot know that those whitespaces are not significant (to you) and therefore creates a text node for them.

<li class="left" id="topOfStack"> |< line break here
    <ul>
^^^^
spaces here

When you dynamically create the elements, there is nothing to parse. You just directly add an element node to another one.

Answer 2

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