javascript - 动态重复/平铺 div 和 child(s)？

我一直在这里和谷歌上进行一些搜索，但似乎找不到与我正在尝试做的事情非常相符的答案。我有一个带有一些文本的 div，它通过在鼠标悬停时转换到不同的背景图像来实现淡入淡出效果。我想要做的是动态平铺/重复相同的 div，以便它填充整个主体(或父 div)。有点像使用 background-repeat:repeat 但使用 div 而不是背景图像。我喜欢看看我可以通过整个页面上的元素随着鼠标移动而淡入淡出来实现什么样的酷视觉效果。

当然，我可以在代码中多次复制和粘贴相同的 div，但必须有更好的解决方案。我认为需要 javascript，但我唯一能找到的关于克隆 div 的东西看起来有点超出我的头脑，我想知道是否有更简单的解决方案。

我用作示例的 CSS 和 HTML 来自我正在处理的站点上的菜单链接。这可能不是最好的例子，但我对 CSS 有点陌生。基本上我想在整个页面上平铺下面的 div。

这是CSS:

#fadediv {
    background-image:url(images/buttonback.png);
    transition: background-image 0.5s linear;
    -moz-transition: background-image 0.5s linear;
    -webkit-transition: background-image 0.5s linear;
}

#fadediv:hover {
    background-image:url(images/buttonback2.jpg);
}

.fadedivtext {
    display:block;
    width:320px;
    height:138px;
    float:left;
    font-size:30px;
    color:#FFF;
    text-align:center;
    line-height:138px;
}

和 HTML 片段:

<div id="fadediv" class="fadedivtext">about me</div>

编辑:除了下面给出的 javascript 示例之外，看起来还有一个 PHP 示例 here 可以工作。

最佳答案

我认为 clone 应该很适合你——它并没有那么复杂，尤其是当你谈论一个基本的 div 时。只需确保以类而不是 ID 为目标(您不应该有多个具有相同 ID 的元素)。

这是一个使用 JQuery 的 clone 的基本示例:

var numberOfClones = 20;
var el = $("#fadediv");
for (i=0 ; i<numberOfClones ; i++) {
    var newEl = el.clone();
    $("#container").append(newEl);
}​

http://jsfiddle.net/9P7bY/2/

编辑

这是 aug 留下的评论:

newE1.attr("id", newId);

关于javascript - 动态重复/平铺 div 和 child(s)？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13665285/