HTML元素的动态创建

dynamic creation of HTML elements

本文关键字：创建 动态 元素 HTML      更新时间：2023-09-26

我正试图使用位于此处的插件创建一个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
}

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

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

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

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

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

没有注意到插件有刷新功能，使用刷新应该可以解决这个问题。

开始：

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

在不使用任何用于动态创建元素的插件的情况下尝试此操作。它的纯javascript和JQuery:

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

我认为这清楚了你的概念。希望这能奏效。

相关文章：