Javascript 停止向节点追加相同的元素

我正在节点上追加元素。我陷入了这样一种情况：每次单击事件都会将相同的元素附加到父元素

我如何停止阻止元素一次又一次地追加，并在第一次单击时仅添加一次

document.getElementsByClassNamebtn[0]。onclick=function{ e、 防止违约； var div=document.createElementdiv； div.innerHTML=错误； document.getElementsByClassNameerrors[0].appendChilddiv； } div{边框：1px纯黑} 点击 错误：您可以检查div或任何其他选择器是否已经存在

var errorEl = document.getElementsByClassName("errors")[0];
var doesDivExist = !!errorEl.querySelector( "div" );
if ( !doesDivExist )
{
   errorEl.appendChild(div);
}

演示

var div=document.createElementdiv； div.innerHTML=错误； document.getElementsByClassNamebtn[0]。onclick=function{ e、 防止违约； var errorEl=document.getElementsByClassNameerrors[0]； var doesDivExist=！！errorEl.querySelectordiv； 如果！真的存在吗{ errorEl.appendChilddiv； } } div{ 边框：1px纯黑 } 点击

---

错误：您可以在单击事件中放置条件。。。就像这个，小心这是问它是否有孩子，你可能想设置一个更具体的条件

var div = document.createElement("div");
document.getElementsByClassName("btn")[0].onclick = function(e) {
   e.preventDefault();
   if (document.getElementsByClassName("errors")[0].firstChild) {
       document.getElementsByClassName("errors")[0].appendChild(div);
   }  
}

---

使用事件后，可以为事件分配一个空函数

document.getElementsByClassNamebtn[0]。onclick=function{ var div=document.createElementdiv； e、 防止违约； div.innerHTML='test'； document.getElementsByClassNameerrors[0].appendChilddiv； document.getElementsByClassNamebtn[0].onclick=function{}； } 按钮

---

我给你创建了一个片段。请让它显示您正在描述的内容。如果不克隆DIV，则会反复移动DIV。代码当前未添加和添加您可以检查该div是否已经存在，即document.getElementsByClassNamebtn[0].childNodes.forEach elem=>{if elem===div{console.log'element ready exist'}}如果您在单击之外创建该div，则在添加时移动相同的div，而不是添加