forEach循环中jQuery的.append()与.html()方法表现差异疑问

现象产生的核心原因是html()和append()两个jQuery方法的底层运行逻辑完全不同： #

• html(content)方法的作用是：先清空选中元素的所有内部原有内容，再将传入的新内容插入到元素内部。你当前代码中每次调用showTask函数，都会遍历整个toDoList数组拼接出所有任务对应的全量<li>字符串，用html()方法相当于每次都用最新的全量列表覆盖旧的列表内容，因此表现正常。
• append(content)方法的作用是：不对选中元素的原有内部内容做任何修改，直接将传入的新内容追加到原有内容的末尾。如果将这里替换为append()，每次调用showTask都会把全量的<li>列表拼到已有列表的后面，相当于重复渲染了所有任务项，自然就会出现新增多个元素而非仅新增一个的问题。

如果想要用append()实现新增单个条目的效果，可以调整逻辑：每次新增任务时仅拼接最新这一条任务对应的<li>字符串，再调用append()插入即可，不需要遍历整个任务数组重绘全量列表。

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