为什么更新包含 `document.getElementById("text").value` 的变量不会改变 DOM？ [复制]

Question

这是我的代码，我想删除 <textarea> 的 value。

<textarea name="text" id="text" cols="50" rows="6" placeholder="inset" required></textarea>
<input type="button" id="btn" value="등록">
<input type="button" id="btn1" value="추가">

JS：

document.querySelector("#btn").addEventListener("click", function(e) {
  var date = document.querySelector("#date");
  var item = document.querySelector("#item");
  var sn = document.createElement("div");
  var sp = document.createElement("div");
  var txt = document.getElementById("text").value;
  date.appendChild(sn);
  item.appendChild(sp);
  date.removeAttribute("id");
  item.removeAttribute("id");
  sn.setAttribute("id", "date");
  sp.setAttribute("id", "item");
  sn.append(today);
  sp.append(txt);
  txt = "";
});

当我编写上面的代码时，我无法删除该值，但在下面的代码中它正在工作。这是为什么呢？

var date = document.querySelector("#date");
  var item = document.querySelector("#item");
  var sn = document.createElement("div");
  var sp = document.createElement("div");
  var txt = document.getElementById("text").value;
  date.appendChild(sn);
  item.appendChild(sp);
  date.removeAttribute("id");
  item.removeAttribute("id");
  sn.setAttribute("id", "date");
  sp.setAttribute("id", "item");
  sn.append(today);
  sp.append(txt);
  document.getElementById("text").value = "";
});

Answer 1

txt = ""; // This changes the value of variable txt as ""

而，

document.getElementById("text").value = ""; // sets the value of element with id "text" to "".