Javascript 无法按预期工作

我有这个HTML：

<ul id="ulref">
    <li>Joe</li>
    <li>Fred</li>
    <li>Steve</li>
</ul>

因此，我认为“hello”应该是新LI的子TextNode，但相反，LI和TextNode都显示为父UL的直接子（兄弟姐妹）。但是，如果我将JS更改为：

ipDOM=document.getElementById("ulref");
x = document.createElement('LI');
y = document.createTextNode("hello");
ipDOM.appendChild(x).appendChild(y);

错过了z阶段，LI是UL的孩子，Textnode是LI的孩子，正如我所想

为什么第一种方法没有像我预期的那样有效？我正在预先构造LI和child TextNode，然后将该配对放入ipDOM，不是吗？

返回附加到节点的子节点。
因此，在将文本节点附加到

li

之后，将其附加到

ul

（将其从

li

中删除）

ipDOM=document.getElementById("ulref");
x = document.createElement('LI');
y = document.createTextNode("hello");
ipDOM.appendChild(x).appendChild(y);

ipDOM=document.getElementById("ulref");
x = document.createElement('LI');
y = document.createTextNode("hello");
x.appendChild(y);  // append the text node to the li
ipDOM.appendChild(x); //append the li to the ul