Question

0

147

Views

Jquery append creating issues

Using append my innerdiv is attaching only one WHEAT-COLORED-BOX*; while using appendTo my innerdiv is attaching all the required number of WHEAT-COLORED-BOXES. Thus, for my case appendto is giving right result while append fails to do so!

$(()=>{

    $('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>

now look at this APPEND method usage ->

$(()=>{

    $('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>

What is the reason for this. Kindly explain...

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

You forgot to close the div tag
You are adding class and style to the container, not to the appending div-s. You can specify it inline on append or create element and then append it.

$(()=>{

    $('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>

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-06-25T23:01:38.443Z

Check This

$(()=>{

    $('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>

0

147

Jquery append creating issues

2 answers

0

0

Find remote jobs

Andres GPT