Javascript 如何通过单击按钮动态创建对象

我试图创建2行6个矩形（被认为是一个对象）

我还想添加一个加号按钮，这样当用户点击任意一端时，一组新的矩形就会出现在原始矩形的上方或下方。（取决于他们单击的加号按钮）

因此，我正在努力实现以下目标：

到目前为止我所尝试/发现的：

$（函数（）{
$（“.repeat”）。在（'click'，函数（e）{
e、 预防默认值（）；
var$self=$（本）；
$self.before（$self.prev（'table'）.clone（））；
//$self.remove（）；
});
});

再加一个
我修改了您的代码，允许“添加到顶部”或“添加到下面”

我编辑了事件侦听器以检查按钮是否具有特定的类。如果是，请在上面或下面添加。它还侦听“body”单击，因为新DOM元素不会附加事件侦听器：

$("body").on('click', ".repeat", function (e) { //other stuff here}

另外，更改HTML使其不依赖于“表单”，只要类仍然存在，就可以交换掉元素类型


$（函数（）{
$（“正文”）。在（'点击'，“.重复”，函数（e）{
e、 预防默认值（）；
var$self=$（本）；
var$parent=$self.parent（）；
if（$self.hasClass（“添加底部”））{
$parent.after（$parent.clone（））；
}否则{
$parent.before（$parent.clone（））；
}
});
});

加在上面
加在下面
您所说的上述示例仅适用于表单的确切含义是什么？这在没有任何表单元素的情况下工作，请参见@delighteddod对不起，我的意思是它只复制输入表单。我想知道如何让它在一系列矩形上工作，就像在我的图片中一样。我仍然不能100%理解你的意思，你当前的代码复制了表格，而不是表单，请看这里把矩形放在一个
DIV
中，这样你就可以克隆整个DIV。给它们一个类，然后使用
$（“.classname”）.eq（2）
来获得第三个。