這兩段 JavaScript 代碼有什么區別？

Question

這是代碼：

<form action="">
        <input type="text" id="new_task" placeholder="Write New Task" required>
        <input type="button" value="Add Task" id="add_task">
    </form>
    <div id="task_list"> 
    </div>

代碼 1：

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);
});

代碼 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);
});

這兩個代碼塊有什么區別？ 我正在嘗試制作一個待辦事項列表網站。 第一段代碼是將輸入的值附加到 div 中，但不創建 p 標簽。 第二段代碼完美運行。 我想知道區別。

Answer 1

顯着差異是代碼塊 1 的這一部分：

.append(document.createElement("p").textContent=new_task)

這實際上創建了一個<p>標簽，但它還沒有附加到文檔中。 當您在這個新的<p>標簽上設置文本內容時，該表達式的計算結果為字符串new_task ，所以它與說的相同

.append(new_task)

這絕對不是你想要的。

代碼塊 1 本質上所做的完整擴展版本是：

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(new_task);
    // different from:
    // task_div.append(task_p)
});