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从前一个元素中移除并添加到新添加的元素中，子节点只有{{1} }。

为什么默认情况下会添加#text？或者他们扮演什么角色？

Answer 1

您是否看到从开头<ul>返回到行首的空格？这就是全文。解析器无法知道这些空格对你来说不重要，因此为它们创建了一个文本节点。

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

当您动态创建元素时，无需解析任何内容。您只需将元素节点直接添加到另一个节点即可。

Answer 2

这些文本节点代表ul代码左侧和右侧的文字。他们应该在那里表示该文本。当您动态创建仅包含<li>标记的<ul>代码时，该文字就不存在。您可以使用.children代替.childNodes来获取元素：

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

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

2 个答案: