javascript - 克隆 DIV 并修改 ID

Question

我需要克隆一个样式化的 DIV ( id="#mirrorBG1") 并修改新的divid，id="#mirrorBG2"然后应用#mirrorBG2CSS 中的类来控制新的div位置和大小等。

任何想法，请！

<div id="mirrorBG1">IMAGE#1 (*main image*) </div>

resulting in adding: <div id="mirrorBG2">IMAGE#1 (*same image*) </div>

#mirrorBG1 { width:50%; height:300px; background-color:#0F0"; float:left; clear:both; }
#mirrorBG2 { width:50%; height:300px; background-color:#FF0"; float:right; clear:both; }

Answer 1

更新后的版本：

var div2 = document.getElementById("mirrorBG1").cloneNode(true);
div2.setAttribute("id","mirrorBG2");
div2.className = "mirrorBG2";

之后，您将 div 附加到任何您想要的位置。例如：

document.body.insertBefore(div2, null);

见jsfiddle

编辑：

正如 stavarotti 所指出的，10 之前的 IE 版本不完全支持 classList。

所以而不是：

div2.classList.remove("mirrorBG1");
div2.classList.add("mirrorBG2");

你可以这样做：

div2.className = "mirrorBG2";

这将用“mirrorBG2”替换类“mirrorBG1”。

我更新了 jsfiddle 以显示这些更改。

Answer 2

如果它对您来说不太依赖，请考虑使用jQuery及其clone()和append()方法。有关更多信息，请参阅jQuery API。