如何使用 JavaScript 复制包含其功能的按钮？

【问题标题】：How can I duplicate a button inclusive its functions with JavaScript?如何使用 JavaScript 复制包含其功能的按钮？
【发布时间】：2020-08-19 06:52:54
【问题描述】：

我有一个附加一些元素的按钮。我想要一个复制这个按钮的按钮。

我发现了一些关于clone()的文章，但我相信那是jQuery？

我似乎找不到答案，但我想是这样的：

var copybutton = create("input");
    copybutton.type = "button";
    copybutton.id = "copybutton" + counter;
    copybutton.value = "copybutton";
    addEvent(copybutton, "click", duplicatefunction);

function duplicatefunction()
{
var duplicatebutton = appendbutton.cloneNode (true);
}

好吧，至少这对我来说有点道理，但当然它不起作用。我该怎么做？

【问题讨论】：

用事件处理程序克隆自己会很痛苦，这就是为什么人们建议你使用框架的克隆方法。如果你真的想要，你可以复制他们的代码。但是，请记住，jQuery 的事件系统并非微不足道，并且可能与您的事件注册风格不相符。也许看看 YUI 或 Prototype 或其他 DOM 框架的克隆方法。

标签： javascript button duplicates clonenode

【解决方案1】：

给定：

<div id="original">
   <p>Hello World</p>
</div>

你可以使用类似的东西：

var e1 = document.getElementById("original"), e2;
e2 = e1.cloneNode(true);

如果要递归复制节点及其子节点，请将参数设置为cloneNode true。

【讨论】：

非常感谢！所以我在正文中制作了按钮，但我是否还在 javascript 中为按钮使用了任何进一步的代码？
问题陈述“包括它的功能”，我发现它的意思是“除了克隆附加的事件处理程序”。 cloneNode 不会克隆它们（afaik）。
@strager 是正确的。您将需要手动复制事件处理程序 (e2.onclick = e1.onclick; ...)，这使得框架方法更具吸引力。如果事件处理程序在 HTML 中声明而不是动态附加，它将被 cloneNode 复制。