两段JavaScript代码差异解析：Todo List中为何一段无法生成p标签？

核心问题出在赋值表达式的返回值特性上，下面拆解两段代码的具体执行逻辑：

Code 1：为何没能生成<p>标签 #

document.getElementById("add_task").addEventListener("click",function(){
    let new_task = document.getElementById("new_task").value;
    document.getElementById("task_list").append(document.createElement("p").textContent=new_task);
});

这段代码里的document.createElement("p").textContent=new_task是一个赋值操作：

• 虽然确实执行了两个动作：创建<p>元素、给该元素的textContent赋值为输入的任务文本，但JavaScript中赋值表达式的返回值是被赋予的值（也就是字符串new_task），而不是被赋值的<p>元素本身。
• 因此append()方法最终接收到的参数是纯字符串，它会直接把文本追加到task_list容器里，而之前创建的<p>元素因为没有被任何变量引用，会被JavaScript的垃圾回收机制清理掉，自然不会出现在DOM中。

Code 2：为何能正常工作 #

document.getElementById("add_task").addEventListener("click",function(){
    let new_task = document.getElementById("new_task").value;
    let task_div = document.getElementById("task_list");
    let task_p = document.createElement("p");
    task_p.textContent = new_task;
    task_div.append(task_p);
});

这段代码把操作拆分成了独立步骤：

1. 先创建<p>元素并将其存储在变量task_p中，保留了对该元素的引用；
2. 给task_p的textContent赋值（这一步的赋值返回值是字符串，但我们不需要用到它）；
3. 把task_p这个DOM元素对象传给append()方法，因此append()会正确将<p>元素添加到task_list容器中，最终生成预期的带任务文本的<p>标签。

可选：一行代码实现正确效果的写法 #

如果想在一行内完成且保证效果正确，可以用Object.assign来同时创建元素并设置属性，确保传递给append()的是DOM元素：

document.getElementById("add_task").addEventListener("click",function(){
    let new_task = document.getElementById("new_task").value;
    document.getElementById("task_list").append(
        Object.assign(document.createElement("p"), { textContent: new_task })
    );
});

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