创建元素，然后删除元素

Posted 2021-03-27

我想在删除一定时间后创建一个元素。

当我单击我的按钮一次时，我的代码工作，它会在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为setTimeout的元素将仅选择具有该ID的第一个元素。您新创建的元素根本不需要ID - 您只需在闭包中引用element变量，并设置其样式。

您也可能会发现分配给元素的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();