how do you add an html tag after div?

Question

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>

Leave a Comment Cancel Reply