动态创建HTML元素

Question

我正在尝试使用该插件创建一个Coverflow，位于此处： http ://vanderlee.github.io/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>

对于手动创建的元素，这很有效，但是在执行以下操作时：

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

$("#preview-coverflow").append(el.newDiv);
$("#preview-coverflow").append(el.newElt);

我的div以垂直方式而不是水平方式显示。 我的问题是两种元素创建形式之间是否有区别？ 在这两种情况下，我都在（尝试）创建空的div并追加到父对象。 我做错什么了吗？

在我的样式表中，仅查看我的空div：

.newDiv { 
    background-color:red
}

Answer 1

似乎在添加元素之后需要运行.coverflow（）。

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

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

如果这似乎可以解决问题，请在添加新元素后考虑实施。

---

没有注意到插件具有刷新功能，使用刷新应该可以解决它。

Answer 2

添加新元素后尝试使用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. 

Answer 3

干得好：

<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>

Answer 4

尝试使用此插件，无需任何插件即可动态创建元素。 其纯JavaScript和JQuery：

<script>

    var myDivs = ""; 

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

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

<script>

我认为这很清楚您的概念。 希望这行得通。