两段相似的JS添加列表元素代码为何输出结果不一致？

差异本质是Node.appendChild()方法的返回值规则导致的，具体拆解如下： #

第一段代码执行逻辑错误点 #

第一段代码的链式调用写法没有正确拿到需要插入的<li>元素：

var AddText = document.createElement('li').appendChild(document.createTextNode("hello"));

appendChild()方法执行完成后，返回值是被插入的子节点，而非调用该方法的父节点，所以上面这行代码里AddText变量存的是你创建的hello文本节点，不是之前新建的<li>元素。后续调用ListParent.appendChild(AddText)时，是直接把文本节点插入到了<ul>标签下，没有<li>包裹。
每次点击都会新生成一个文本节点插入到ul中，文本会直接拼接在一起，所以第二次点击就会显示hellohello。 #

第二段代码执行逻辑正确点 #

第二段代码拆分了创建节点和插入子节点的步骤：

// 先把新建的li元素存到变量中
var AddText = document.createElement('li');
// 给li插入文本节点
AddText.appendChild(document.createTextNode('hello'));
// 把整个li元素插入到ul下
ListParent.appendChild(AddText);

每次点击都会新增一个完整的<li>hello</li>元素插入到ul中，所以DOM结构和显示效果都符合预期。

内容的提问来源于stack exchange，提问作者magdy reffat