Can't multiple append() within a for loop

When you do var $node = $("<div></div>"); you're creating a jQuery object with a newly-created div inside it which isn't in the DOM yet. The first time you append it, you put it in the DOM. The second time you append it, you move it. (Well, you would if you were appending it to something else, but actually you're just putting it in the same place.)

If you want multiple divs, you need to create more than one. clone does that, but in that code, you could just do it directly.

Append is perfectly happy with markup:

$( document ).ready(function() {
    var $divg = $('#colors');
    for (var i = 1; i <= 40; i++) {
        $divg.append("<div></div>");
    }
});

Or if it's important to create the element first because you're doing things with it:

$( document ).ready(function() {
    var $node;
    var $divg = $('#colors');
    for (var i = 1; i <= 40; i++) {
        $node = $("<div></div>");
        $divg.append($node);
    }
});

Or using clone, but in this case I probably wouldn't:

$( document ).ready(function() {
    var $node = $("<div></div>");
    var $divg = $('#colors');
    for (var i = 1; i <= 40; i++) {
        $divg.append($node.clone());
    }
});

(Note that technically, that creates an extra div, but it's fine, that isn't expensive and it doesn't get added to the DOM anywhere.)

I cannot explain it better that T.J's explanation. Use the clone() function to create a new div.

$( document ).ready(function() {
    var $divg = $('#colors');
    var $node = $("<div></div>");
    for (var i = 1; i <= 40; i++) {
        $divg.append($node.clone());
    }
});

#colors div{
  border : 1px solid red;
  width : 50px;
  height : 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colors">
    <div></div>
</div>

I used plain JavaScript (I wrapped it in a $(function(){}), because I was going to write jQuery initially.)because (at least for me) it's easier to read the code (plus I suck at jQuery too many options makes my mind lazy.)

Although cloning is the common way to accomplish your goal, there are other ways to iterate through the creation of elements such as createElement() and appendChild();

$(function() {
  for (var i = 0; i < 40; i++) {
    var shade = document.getElementById('colors');
    var x = document.createElement('div');
    x.classList.add('x');
    shade.appendChild(x);
  }
});

#colors {
  border: 3px inset black;
  min-height: 30px;
  max-width: 300px;
  display: table;
}
.x {
  border: 1px solid red;
  min-width: 30px;
  border-radius: 50%;
  display: table-cell;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>


<div id="colors">
  <div></div>
</div>

move var $ node = .. .into the loop:

$( document ).ready(function() {
    var $divg = $('#colors');
    for (var i = 1; i <= 40; i++) {
        var $node = $("<div></div>");
        $divg.append($node);
    }
});

or even:

 $divg.append("<div></div>");