JS开发待办网站时li.innerText显示[object HTMLLIElement]如何解决

问题根源 #

1. 你遍历的data.childNodes返回的是DOM节点集合，每一项item都是DOM元素对象而非字符串，直接赋值给li.innerText时，会自动调用对象的toString()方法，最终输出[object HTMLLIElement]。
2. 你使用document.querySelector('.task-ul')获取任务步骤列表，这个选择器会匹配页面上第一个符合类名的ul元素，当存在多个任务时，新任务的步骤会错误添加到最早创建的任务中，应该直接使用你提前创建好的newUl实例。
3. 额外注意：childNodes会把标签之间的空白、换行识别为文本节点，遍历的时候可能出现空内容的步骤，推荐改用children属性，只会返回元素节点。

修复方案 #

把你代码中遍历步骤的片段替换为如下内容：

// 直接用提前创建的newUl，不用再查询DOM
let list = newUl;
// 用children只取元素节点，跳过空白文本节点
let dataList = data.children;

dataList.forEach((item)=> {
  li = document.createElement('li');
  // 取原有步骤节点的文本内容赋值
  li.innerText = item.innerText;
  list.appendChild(li);
}); 

如果需要保留原有步骤节点的样式、事件等属性，可以直接克隆节点：

li = item.cloneNode(true);

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