Javascript 创建元素，然后删除元素

我试图有一个元素被创建，然后在一定时间后被删除

我的代码在我单击一次按钮时工作，它会在2秒后删除元素，但如果我多次单击按钮，setTimeout函数将停止工作

function displayText(){
    var element = document.createElement("P");
    element.id = "text1";
    element.appendChild(document.createTextNode('Hello'));
    document.getElementById('Div1').appendChild(element);
    setTimeout(function(){
        document.getElementById("text1").style.display = "none";
    }, 2000);
}

---

在一个文档中有多个id是无效的HTML-在

设置超时中选择id为
text1
的元素只会选择id为该元素的第一个元素。您新创建的元素根本不需要id-您可以在闭包，并设置其样式

您还可能会发现分配给元素的
textContent
比使用
createTextNode
更容易：

function displayText(){
  var element = document.createElement("P");
  element.textContent = 'Hello';
  document.getElementById('Div1').appendChild(element);

  setTimeout(
    function(){
      element.style.display = "none";
    }, 2000);
}

注意

element.style.display = "none";

实际上不会删除元素-如果要从DOM中删除元素，请使用

element.remove();

在一个文档中有多个id是无效的HTML-在
设置超时中选择id为
text1
的元素只会选择id为该元素的第一个元素。您新创建的元素根本不需要id-您可以在闭包，并设置其样式

您还可能会发现分配给元素的
textContent
比使用
createTextNode
更容易：

function displayText(){
  var element = document.createElement("P");
  element.textContent = 'Hello';
  document.getElementById('Div1').appendChild(element);

  setTimeout(
    function(){
      element.style.display = "none";
    }, 2000);
}

注意

element.style.display = "none";

实际上不会删除元素-如果要从DOM中删除元素，请使用

element.remove();

如果多次单击按钮，您可能应该定义所需的行为。例如，是否要添加更多节点，并且每个节点都应在单击生成节点2秒后删除？或者，如果单击一次，则在2秒钟后删除前一个元素之前，您不应该添加另一个元素？您可能应该定义在多次单击按钮的情况下所需的行为。例如，是否要添加更多节点，并且每个节点都应在单击生成节点2秒后删除？或者，如果单击一次，则在前一个元素在2秒后被删除之前，您不能添加另一个元素？