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

我希望使用vanilla javascript实现此行为：

如果我使用以下命令单击页面上的任何窗口：

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

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

window.addEventListener

它们将同时被调用，并将添加两个div。 有没有简单的解决办法

行为如下：单击页面上的adddiv。。再次单击“添加另一个不同的div”。

---

谢谢

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

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

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（“单击”，函数（）{
var div=document.createElement（'div'）；//这将创建一个元素
div.style.border='1px solid#000'；//添加此项，您将看到黑色边框出现
document.body.appendChild（div）；//这将把div元素发送到body
})

您可以通过调用HTML对象的appendChild（）函数向正文中添加新元素。取决于要添加新元素的位置

例如：

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

var p=document.createElement（'p'）；//创建新的
document.body.appendChild（p）；//把它加到身体上

如果第三次或第四次单击会发生什么？尝试创建一个最小的、具体的、可验证的示例。到目前为止，您所展示的将起作用：除非您为每个元素添加一个新的事件侦听器，否则是的，您将同时调用多个处理程序。它将添加另一个div@aphex如果这对您有帮助，并且您已经得到了答案，请随时标记：）

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