为什么更新包含`document.getElementById（“ text”）。value`的变量不会更改DOM？ [重复]

Question

此问题已经在这里有了答案：

• Setting innerHTML: Why won't it update the DOM?5个答案

这是我的代码，我要删除<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 "".