li元素的子节点给出[#text， <ul>…</ul>， #text]

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

本文关键字：ul #text 元素 子节点 li      更新时间：2023-09-26

我创建了一个聊天对话。

具有id="topOfStack"即

的li元素的子节点
document.querySelector('#topOfStack').childNodes

result with: 

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

my problem的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 ?或者他们扮演什么角色?

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

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

看到从开始的<ul>到行首的空格了吗?这些都是文本。解析器无法知道这些空白(对您来说)是不重要的，因此为它们创建一个文本节点。

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

动态创建元素时，没有什么需要解析的。您只需直接将一个元素节点添加到另一个元素节点。

相关文章：