JQuery not working after using append()

Question

I have a button that has the .append() function. So every time I click on that button, it adds 1 new DIV element to the body.

But the DIV elements have the fadeIn() function. That means every time I add a new DIV element, it should fade in slowly, but it doesn't.

<button id="btn1">CLICK</button>
<div class="box"></div>

HERE IS THE DEMO

I have found some similar problems here but none of them really helped me so I would be very glad if someone gave me a decent solution.

Answer 1

you can try something like this

$('#btn1').on('click',function(){
    $("body").append(
        $(document.createElement('div'))
            .addClass('box')
            .fadeIn(3000)
    );
});

Fiddle demo here