Question

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

如何阻止元素一次又一次地追加，并在第一次点击时添加一次。

＆＃13;

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

＆＃13;

div { border: 1px solid black }

＆＃13;

<button class="btn" type="button">Click</button>
<div class="errors">Errors:</div>

＆＃13;

Answer 1

使用该事件后，您可以为该事件指定一个空函数。

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

<button class="btn">button</button>
<div class="errors"></div>

Answer 2

您可以检查div（或任何其他选择器）是否已经存在。

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

<强>演示

＆＃13;

var div = document.createElement("div");
div.innerHTML = "error";
document.getElementsByClassName("btn")[0].onclick = function(e) {
  e.preventDefault();
  var errorEl = document.getElementsByClassName("errors")[0];
  var doesDivExist = !!errorEl.querySelector("div");
  if (!doesDivExist) {
    errorEl.appendChild(div);
  }
}

＆＃13;

div {
  border: 1px solid black
}

＆＃13;

<button class="btn" type="button">Click</button>
<div class="errors">Errors:</div>

＆＃13;

Answer 3

你在点击事件中添加一个条件...就像这个一样，小心这是在询问它是否有一个孩子，你可能想要设置一个更具体的条件......

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);
   }  
}

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

3 个答案: