Question

我试图动态追加几个div元素。但是，当我去测试代码时，浏览器中只创建/显示了一个div元素。我试着寻找类似的问题/问题，但没有找到。任何帮助将不胜感激。

.divcreate {
    height:75px;
    width:75px;
    border:2px solid #000000;
    display:inline-block;
}

$(document).ready(function () {
    for (var i=0; i < 12; i++) {
        $("body").append("<div></div>").addClass('divcreate');
    }
});

Answer 1

由于addClass功能适用于您的body选择器，因此您的代码会添加12个div，然后将divcreate类应用于您的body元素。下面是一个简单的工作版本，它将类设置为内联。

＆＃13;

$(document).ready(function (){
    for (var i=0; i < 12; i++) {
      $("<div></div>").addClass('divcreate').appendTo(document.body)
    }
});

＆＃13;

.divcreate {

height:75px;
width:75px;
border:2px solid #000000;
display:inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

您正在将该类添加到正文中。如果你在div中放置文本，你会发现div实际上被添加了12次。请参阅此jsfiddle -> https://jsfiddle.net/ehj6wzew/

Answer 3

先添加课程然后追加

$(document).ready(function (){
    for (var i=0; i < 12; i++) {
      $("body").after($('<div></div>').addClass('divcreate'));
    }

});

.divcreate {

height:75px;
width:75px;
border:2px solid #000000;
display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

为什么只附加一个div？

3 个答案: