Wrapping and appending an array-element by using jQuery.each

Question

I'm destroying myself over this. Not the must experienced ind js. But this should be simple right?

I want to wrap each element in my 'arr'-array in <div class="mongol"></div> and append it to the div#testBox. Im using jQuery.each to do so, but I am not getting anything:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript'>
  var arr = ["one", "two", "three", "four", "five"]

  jQuery.each(arr, function() {
    $(this).append("#testBox").wrap("<div class='mongol'></div>");
  });
</script>

If i alert(this) in my jQuery.each-function then it alerts every element just fine. I don't get it.

What i am trying to achieve:

<div id="testBox>
    	<div class=" mongol ">one</div>
    	<div class="mongol ">two</div>
    	<div class="mongol ">three</div>
    	<div class="mongol ">four</div>
    	<div class="mongol ">five</div>
    </div>

Answer 1

var arr = [ "one", "two", "three", "four", "five" ]
    jQuery.each(arr, function(index, value) {
    $("#testBox").append("<div class='mongol'>" + value + '</div>');
 });

That works if you have a <div> like that in your Site

<div id="testBox"></div>

Answer 2

Are you confusing append() with appendTo()? The code you posted will append the testBox element to each of your array items, which is probably not what you want (and won't work anyway). Try:

jQuery.each(arr, function(index, item) {
    jQuery("<div class='mongol'></div>").text(item).appendTo("#testBox");
});