Javascript 我可以修改我的按钮点击脚本吗

我有一个javascript代码，所以当用户按下按钮时，就会创建一个div的克隆。代码运行良好，但是没有复制div的属性，因此如果原始div具有css属性，那么div克隆就不会具有这些属性。那么，有没有一种方法可以完全复制div，甚至复制它的特性呢

$（函数（）{
$（'.button'）。在（'click'，function（）上{
$（'.note:first'）.clone（）.draggable（）.appendTo（'body'）；
});
});
。注意{
宽度：280px；
高度：100px；
填充顶部：40px；
边缘顶部：60像素；
左边距：35px；
断字：断字；
字体系列：注；
字体大小：30px；
背景图片：url（“images/stickynote.png”）；
背景重复：无重复；
背景尺寸：封面；
z指数：1；
}
.注：img{
位置：相对位置；
位置：绝对位置；
顶部：0px；
右：0px；
}
.按钮{
位置：固定；
顶部：160px；
左边缘：44%；
边框：1px实心#000000；
背景#f2ad24；
背景：-webkit渐变（线性、左上、左下、从（#ffff92）到（#f2ad24））；
背景：-webkit线性梯度（顶部，#ffff92，#f2ad24）；
背景：-moz线性梯度（顶部，#ffff92，#f2ad24）；
背景：-ms线性梯度（顶部，#ffff92，#f2ad24）；
背景：-o-线性梯度（顶部，#ffff92，#f2ad24）；
背景图像：-ms线性梯度（顶部，#ffff92 0%，#f2ad24 100%）；
填充：13px26px；
-webkit边界半径：16px；
-moz边界半径：16px；
边界半径：16px；
-webkit盒阴影：rgba（255255255,0.4）0 0px 0，插入rgba（255255255,0.4）0 0px 0；
-moz盒阴影：rgba（255255255,0.4）0 0px 0，插入rgba（255255255,0.4）0 0px 0；
盒影：rgba（255255255,0.4）0 0px 0，插入rgba（255255255,0.4）0 0px 0；
文本阴影：#7ea4bd 0 1px 0；
颜色：#000000；
字体大小：35px；
字体系列：注；
文字装饰：无；
垂直对齐：中间对齐；
}
.按钮：悬停{
边框：1px实心#0a3c59；
文本阴影：#1e4158 0 1px 0；
背景#f08d24；
背景：-webkit渐变（线性、左上、左下、从（#ffe194）到（#f08d24））；
背景：-webkit线性梯度（顶部，#ffe194，#f08d24）；
背景：-莫兹线性梯度（顶部，#ffe194，#f08d24）；
背景：-ms线性梯度（顶部，#ffe194，#f08d24）；
背景：-o-线性梯度（顶部，#ffe194，#f08d24）；
背景图像：-ms线性梯度（顶部，#FFE1940%，#F08D24100%）；
颜色：#212121；
}
.按钮：激活{
文本阴影：#1e4158 0 1px 0；
边框：1px实心#0a3c59；
背景：#f09424；
背景：-webkit渐变（线性、左上、左下、从（#ffe194）到（#f08d24））；
背景：-webkit线性梯度（顶部，#ffe194，#f09424）；
背景：-莫兹线性梯度（顶部，#ffe194，#f09424）；
背景：-ms线性梯度（顶部，#ffe194，#f09424）；
背景：-o-线性梯度（顶部，#ffe194，#f09424）；
背景图像：-ms线性梯度（顶部，#ffe194 0%，#f09424 100%）；
颜色：#fff；
}

HTML
继续单击此文本以选择
使用insertAfter jquery函数

$(function() {
$('.button').on('click', function(e){
e.preventDefault();
var test = $('div.note:first').clone();
$(test).insertAfter("div.note:last");
});
});

您可以克隆div，将其添加到DOM，然后使其可拖动：

   var newobj = $('.note:first').clone();
// change the id, if needed        
//$(newobj).attr("id","newId");
        $("body").append(newobj);
        $(newobj).draggable();

下面是一个JSFIDLE示例：

希望它有帮助
使用
true
作为
clone（）的参数
。或者，如果您不需要深度副本，只需从原始div中设置其类名。请检查此链接：@Mouser hmmm我尝试了此操作，但当我移动克隆时，原始副本会移动，而我无法移动克隆copy@Gusicindustry; 这是因为所有的属性都被复制了。你必须让它再次独一无二。例如如果元素具有
id
，则复制的节点将具有相同的id。id需要唯一，因此您需要对其进行寻址。您还可以使用$（'.note:first'）[0].outerHtml获取完整的外部html，然后在此基础上创建一个新的div。我对此进行了测试，发现所有css属性都会影响类的类型，样式标记也会被复制。您可以在单独的html页面中尝试这一点吗。意味着删除所有其他代码，并且tryI已经将jquery 2.1.3包含在您的演示中。在那之后，检查你的jquery版本，如果它仍然不适合你的话，试着添加最新版本。我添加了code.jquery.com/jquery-2.1.3.min.js“>到我的html文件，但没有任何效果让我们来看看。我尝试了这个示例，但我的项目和JSFIDLE都显示了一个警报，阻止按钮创建新的div。这只是为了调试JSFIDLE中的建议，您可以在代码中删除。