Append to an object selected from a list in jQuery

Question

Here is a minimal version of my problem, given:

<div class="foo">
   <div class="a"> </div>
   <div class="b"> </div>
   <div class="c"> </div>
</div>

I want to insert the element <div class="bar">WORKS!</div> into one of the children randomly.

var kids = $(.foo).children();
var idx  = Math.floor(Math.random() * kids.length);
var target = kids[idx];

I think this is a misunderstanding between how javascript and jQuery work together. I'm learning both at the moment, so here is my due diligence in solving the problem:

• target.append(...) fails since target is not a JQuery object and .append() is a JQuery call.
• $(target).append(...) does strange things, copying items around in the DOM and I don't understand why. It may work in this isolated example, but it's causing crazy town with many foo's, a's, b's and c's.
• target.innerHTML=... doesn't seem to work and I don't want to erase any previous content with the append.

Answer 1

Try .eq()

var target = kids.eq(idx);

Answer 2

Try,

var target = kids.eq(idx);

instead of,

var target = kids[idx];

Please read here to know more about .eq()