Javascript 动态创建HTML元素

我正在尝试使用插件创建coverflow，位于此处：

我所要做的就是：

<div class="coverflow">
    <div class="cover">A</div>
    <div class="cover">B</div>
    ...
    <div class="cover">Y</div>
    <div class="cover">Z</div>
</div>

<script>
    $(function() {
        $('.coverflow').coverflow();
    });
</script>

---

在没有任何插件的情况下尝试动态创建元素。其纯javascript和JQuery：

<script>

    var myDivs = ""; 

    for(var i=0; i <10; i++)
    {
        myDivs+= "<div class='cover'></div>";
    }

    $(".coverflow").html(myDivs);

<script>

var myDivs=“”；
对于（var i=0；i，似乎需要在添加元素后运行.coverflow（）

在控制台中，动态添加html后，只需尝试运行

$('.coverflow').coverflow('refresh');

如果这似乎解决了问题，那么在添加新元素后再考虑实现它


没有注意到插件有刷新功能，使用刷新应该可以解决问题。
添加新元素后，尝试使用
刷新
方法

$('.coverflow').coverflow('refresh');

从文档：

刷新

Redraw the covers. You shouldn't ever need to do this unless you are adding or removing 
covers or changing the covers yourself.

给你：

<style>
    .newDiv {
        background: gold;
        position: absolute;
        width: 320px;
        height: 320px;
        overflow:hidden;
    }
</style>
<script>
    $(function() {
        $('.coverflow').coverflow();
        addNewTest();// test call here
    });

function addNewTest(){
    var el = {
        newDiv: $("<div>", { class: "cover newDiv"}),
        newElt: $("<div>", { class: "cover newDiv"})
    }

    $("#preview-coverflow").append(el.newDiv, el.newElt).coverflow('refresh');
}
</script>


纽迪夫先生{
背景：金；
位置：绝对位置；
宽度：320px；
高度：320px；
溢出：隐藏；
}
$（函数（）{
$（'.coverflow'）.coverflow（）；
addNewTest（）；//此处进行测试调用
});
函数addNewTest（）{
变量el={
newDiv:$（“”，{class:“cover newDiv”}），
newElt:$（“”，{class:“cover newDiv”}）
}
$（“#预览coverflow”）.append（el.newDiv，el.newElt）.coverflow（'refresh'）；
}
一个人不应该给出相同的“id”多个元素的值。感谢现在已修复。我创建了该ID用于说明。但问题仍然存在。应该通过css类将
位置设置为绝对值来管理它。除了
刷新
调用之外，请查看我在回答中的解决方法谢谢Venkata。我需要将定位设置为绝对值并刷新整件事。
Redraw the covers. You shouldn't ever need to do this unless you are adding or removing 
covers or changing the covers yourself.

<style>
    .newDiv {
        background: gold;
        position: absolute;
        width: 320px;
        height: 320px;
        overflow:hidden;
    }
</style>
<script>
    $(function() {
        $('.coverflow').coverflow();
        addNewTest();// test call here
    });

function addNewTest(){
    var el = {
        newDiv: $("<div>", { class: "cover newDiv"}),
        newElt: $("<div>", { class: "cover newDiv"})
    }

    $("#preview-coverflow").append(el.newDiv, el.newElt).coverflow('refresh');
}
</script>