Question

我想使用香草javascript实现此行为：

如果我使用以下方法单击页面上任意位置的窗口：

window.addEventListener("click", function() {
   // code here
   // create div
   // append child to body
})

之后，我再次要单击窗口，我想添加另一个（不同的）div，但是他的问题是，如果我有两个

window.addEventListener

它们将同时被调用，并且将添加两个div。有一个简单的解决方案吗？

这样的行为：单击页面上的添加div。再次单击添加另一个不同的div。谢谢

Answer 1

您可以像之前发布的一样创建一键式事件处理程序

window.addEventListener("click", function() {
  // code here
  // create div
  // append child to body
})

每次单击窗口都会触发此事件处理程序。如果要为元素注册特定的处理程序，请使用

document.getElementById('someidparameter').addEventListener("click, function() {
}

这里的关键部分是document.getElementById()

然后点击功能的主体

var div = document.createElement('div'); // this will create an element
document.body.appendChild(div); // This will apend the div element to the body

您的总代码如下：

window.addEventListener("click", function() {
  var div = document.createElement('div'); // this will create an element
  div.style.border = '1px solid #000'; // add this so you'll see a black border appearing
  document.body.appendChild(div); // This will apend the div element to the body

})

Answer 2

您可以通过调用HTML对象的appendChild（）函数将新元素添加到正文中。取决于要在何处添加新元素。

例如：

var p = document.createElement('p'); // create new <p>
document.body.appendChild(p); // add it to the body

如何在窗口单击上添加新的Div元素

2 个答案: