Javascript 如果createElement（）在其末尾链接，为什么appendChild（）会覆盖它？

问题是： 我试图理解为什么我不能像这样将

appendChild（）

方法链接到

document.createElement（）

：

var listItem = document.createElement('li').appendChild(text);

HTML

但为什么我这样做：

var ul = document.getElementsByTagName('ul')[0]; 
var text = document.createTextNode('I am the first generated list'); 
var listItem = document.createElement('li').appendChild(text); 
ul.appendChild(listItem);

它删除我形成的li元素，并仅将文本添加到ul项目！

---

为什么？

实际上，它不是在删除，该方法返回附加的子级，因此在第二种情况下，

listItem

保存附加的文本节点的引用

var ul=document.getElementsByTagName（'ul'）[0]；
var el=document.createElement（'li'）；
el.appendChild（document.createTextNode（'这是一个文本字符串'）；
//或el.textContent='这是一个文本字符串'；
ul.儿童（el）

新鲜无花果
松子
蜂蜜
香醋
因为
appendChild
不是设计成这样的。本来可以，但事实并非如此。要使它以这种方式工作，
appendChild
必须返回对调用它的元素的引用，但它没有返回；它返回您传递给它的参数

它删除了我形成的li元素

不，它不会删除它；它从不附加它，因为
listItem
不是对您创建的元素的引用；而是文本节点。从：

appendChild（在DOM级别3中修改）

将节点
newChild
添加到此节点的子节点列表的末尾。如果
newChild
已在树中，则首先将其删除

参数


Node类型的
newChild

要添加的节点。如果是DocumentFragment对象，则文档片段的全部内容将移动到此节点的子列表中


返回值


节点

已添加节点。

注意返回值

var ul = document.getElementsByTagName('ul')[0];
var txt = document.createTextNode('this is a text string');
var el = document.createElement('li');
el.appendChild(txt);

var ul = document.getElementsByTagName('ul')[0]; 
var text = document.createTextNode('I am the first generated list'); 
var listItem = document.createElement('li').appendChild(text); 
ul.appendChild(listItem);