Jquery 追加创建问题

Question

使用 append 我的 innerdiv 只附加了一个 WHEAT-COLORED-BOX*；在使用 appendTo 时，我的 innerdiv 附加了所有所需数量的小麦色盒子。因此，对于我的情况，appendto 给出了正确的结果，而 append 却失败了！

$(()=>{

    $('button').click(function appendizing(){
        for(let i=1; i<=9; ++i)
             $('<div></div>').addClass('box').css("backgroundColor", "wheat").appendTo('.container');
    });

});

.container{
    font-size: 0px;
    border: 1px solid blue;
    width: 120px;
    height: 120px;
}

.box{
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>

<button>appendDiv</button>

现在看看这个APPEND方法的用法 ->

$(()=>{

    $('button').click(function appendizing(){
    for(let i=1; i<=9; ++i)
$('.container').append('<div</div>').addClass('box').css("backgroundColor", "wheat");
    });

});

.container{
    font-size: 0px;
    border: 1px solid blue;
    width: 120px;
    height: 120px;
}

.box{
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>

    <button>appendDiv</button>

这是什么原因。请解释...

Answer 1

检查这个

$(()=>{

    $('button').click(function appendizing(){
    for(let i=1; i<=9; ++i)
$('.container').append($('<div></div>').addClass('box').css("backgroundColor", "wheat"));
    });

});

.container{
    font-size: 0px;
    border: 1px solid blue;
    width: 120px;
    height: 120px;
}

.box{
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>

    <button>appendDiv</button>

Answer 2

您忘记关闭 div 标签
您正在向容器添加 class 和样式，而不是添加 div-s .您可以在追加或创建元素时内联指定它，然后追加它。

$(()=>{

    $('button').click(function appendizing(){
    for(let i=1; i<=9; ++i)
$('.container').append('<div class="box" style="background-color: wheat;"></div>');
    });

});

.container{
    font-size: 0px;
    border: 1px solid blue;
    width: 120px;
    height: 120px;
}

.box{
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>

    <button>appendDiv</button>

Jquery 追加创建问题

Jquery append creating issues

javascript

html

jquery

css

node.js