How to append html tag after div?

I want to append a <br> after a <div>.

My code

function generatescene() {
    for (i = 1; i < 101; i++) {
        $('#fightarea').append('<div class='block block' + i + ''><img src=block.png></div>');
        if (i % 5) { } else {
            if (i % 5 == 0) {
                console.log('.block' + i + ' img');
                $('.block' + i).after('<br>');
            }
        }
    }
    $('.block').wrapAll('<div class='scene'></div>');
}

I have this result

<div>
  <div class="scene">
    <div class="block block1"><img src="block.png"></div>
    <div class="block block2"><img src="block.png"></div>
    <div class="block block3"><img src="block.png"></div>
    <div class="block block4"><img src="block.png"></div>
    <div class="block block5"><img src="block.png"></div>
    <div class="block block6"><img src="block.png"></div>
    <div class="block block7"><img src="block.png"></div>
    <div class="block block8"><img src="block.png"></div>
    <div class="block block9"><img src="block.png"></div>
    <div class="block block10"><img src="block.png"></div>
    <!-- ... -->
  </div><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br>
</div>

The <br> append after the div.scene but I want the <br> append after the "div.block" + i.

Answer

The issue is this line:

$('.block').wrapAll('<div class='scene'></div>');

which, as stated in the jquery wrapAll doc does:

The structure will be wrapped around all of the elements in the set of matched elements, as a single group.

so it takes all the .block elements that are siblings and creates a single group, thus moving your <br/>s to outside the .scene div.

function generatescene() {
    for (i = 1; i < 100; i++) {
        $('#fightarea').append('<div class='block block' + i + ''><img src=block.png></div>');
        if (i % 5) { } else {
            if (i % 5 == 0) {
                console.log('.block' + i + ' img');
                $('.block' + i).after('<br>');
            }
        }
    }
    //$('.block').wrapAll('<div class='scene'></div>');
}
generatescene();

$("#btn").click(function() {
    $('.block').wrapAll('<div class='scene'></div>');
});

.block { float:left; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn">wrap all </button>
<hr/>
<div id='fightarea'>
</div>

---

It’s not clear exactly what you’re trying to achieve, perhaps adding the .scene div first and then inserting the blocks inside that?

function generatescene() {
    var scene = $('<div class='scene'></div>').appendTo("#fightarea");
    for (i = 1; i < 100; i++) {
        scene.append('<div class='block block' + i + ''><img src=block.png></div>');
        if (i % 5) { } else {
            if (i % 5 == 0) {
                console.log('.block' + i + ' img');
                $('.block' + i).after('<br>');
            }
        }
    }
    
}
generatescene();

.block { float:left; }

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