append div class within jquery

Question

I have this code:

function Filter($container, params, markers) {
  var $label;
  this.markers = markers;
  this.values = {};
  this.key = params.key;
  $label = $('<label />').text(params.label);
  this.$element = $('<select class="form-control input-lg"/>');
  this.$element.append($('<option />').attr('value', 'all').text('All'));
  $container.append($label, this.$element);
}

Essentially, this renders.

<label>Category</label>
 <select class="form-control input-lg">
  <option value="all">All</option>
  <option value="Pizza">Pizza</option>
  <option value="Mexican">Mexican</option>
 </select>

But I want it to wrap the above with.

<div class="form-group col-xs-4">
 -- and --
</div>

ANy suggestions please, I have tried almost all variants with no success.

Answer 1

Use jQuery Wrap to wrap an element, but in your case I'd go for this:

var formgroup = $("<div class='form-group col-xs-4'/>");
formgroup.append($label, this.$element);
$container.append(formgroup);