javascript - 无法将子元素附加到单击的元素

Question

我尝试在单击元素时将 div 附加到该元素，但是当我使用 .appendChild(div) 时，我尝试附加的元素未定义。我很困惑，因为它显然在 DOM 中，因为我能够检测到对其的点击，但我只是无法附加到它。

var pcells = document.getElementsByClassName('priority-cell');

for (var i=0; i < pcells.length; i++) {
  pcells[i].onclick = function () {
    var div = document.createElement('div');
       div.style.backgroundColor = "red";
       div.style.height = "10px";
       div.style.width = "10px";

       pcells[i].appendChild(div);
  };
}

Answer 1

您遇到范围界定问题。您需要将事件详细信息传递到处理程序中，并使用 target 属性来识别单击了哪个单元格。

var pcells = document.getElementsByClassName('priority-cell');

for (var i=0; i < pcells.length; i++) {
  pcells[i].onclick = function (e) {
    var div = document.createElement('div');
       div.style.backgroundColor = "red";
       div.style.height = "10px";
       div.style.width = "10px";

       e.target.appendChild(div);
  };
}

(JSFiddle:https://jsfiddle.net/z3nhprzp/)