javascript - li 元素的子节点给出 [#text, … , #text]

Question

我在这里创建了一个聊天对话。

带有id="topOfStack"的li元素的子节点即

document.querySelector('#topOfStack').childNodes

结果:

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

下面是我的问题的 HTML 代码

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

但是当我动态创建一个新的“li”元素并附加到聊天(ul 元素)时，id="topOfStack 从前一个元素中删除并添加到新附加的元素中，子节点只有 [<ul>​…​</ul>​] 。

为什么默认添加#text？或者他们扮演什么 Angular 色？

Answer 1

那些文本节点表示 ul 左右两侧的文本标签。他们应该在那里表示该文本。当您动态创建 <li>标签只有一个 <ul>在其中标记，该文本不存在。你可以使用 .children而不是 .childNodes只获取元素:

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