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?