克隆DIV&修改ID

Cloning a DIV & amending the ID

本文关键字：修改 ID amp DIV 克隆      更新时间：2023-09-26

我需要克隆一个样式化的div（id="#mirrorBG1"）并将新的div id修改为id="#mirrorBG2"，然后在CSS中应用类#mirrorBG2来控制新的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; }

更新版本：

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

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

document.body.insertBefore(div2, null);

参见jsfiddle

编辑：

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

所以不是：

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

你可以这样做：

div2.className = "mirrorBG2";

这将用"mirrorBG2"替换类"mirrorBG1"。

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

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

相关文章：