我想制作一个按钮，当单击该按钮时，会将新按钮附加到body元素，我希望此按钮是原始按钮的副本，这样，当单击它时，它也会将新按钮附加到具有以下内容的body元素与前两个按钮具有相同的功能。我知道这是荒谬的，这纯粹是一种学习练习：）。
我目前拥有的是：
<html>
<head>
<meta charset="utf-8">
<title>Learning Things :3</title>
</head>
<body>
<button onclick="myFunction()">CLICK ME</button>
<script>
function myFunction() {
var btn = document.createElement("BUTTON");
btn.innerHTML = "CLICK ME";
btn.addEventListener("click", function() {
alert("did something");
});
document.body.appendChild(btn);
}
</script>
</body>
</html>
这很正常，除了该功能不是我想要的功能，我想放置：
btn.addEventListener("click", myFunction());
但是这给我一个错误“太多的递归”，我认为这是因为当它尝试追加新按钮时，它将遍历函数一次，以检查函数中是否没有错误，但这会导致无限循环，有什么优雅的解决方案？
编辑：修正错字
btn.addEventListener("click", myFunction)
是您想要的。
btn.addEventListener("click", myFunction())
在myFunction之前调用addEventListener，所以这是一个无限循环。
如果要使用HTML创建变量UI，建议使用Svelte之类的Web框架。 Here's the same example I made using it。
[someFunction()]在那里调用该函数，但是您只需将其作为addEventListener()传递给someFunction：
let number=1;
function someFunction(){
let btn=document.createElement("button");
btn.innerText=number++;
btn.addEventListener("click",someFunction);
document.body.appendChild(btn);
}
someFunction();