Avoiding markup in javascript controllers when using jQuery

Please consider an application that uses Javascript/jQuery, and for the sake of simplicity, it contains something like this:

[HTML]

<div id="some-id"></div>
<select id="available-fruits">
    <option>Loading...</option>
</select>

...
MyController.fruitLoader();
...

[MyController.js]

... snip ...
fruitLoader: function () {
    FruitProviderNS.getFruits(function (fruits) { // Ajax Call + CallBack
        $.each(fruits, function(i, fruit) {
            $('#available-fruits')
                .append($('<option />', { value: fruit.id })
                .text(fruit.name));
        });
        $('#some-id').html('Pick your fruit!');
    );
}
... snip ...

As you can see in the example above, the controller is generating markup (albeit through jQuery).

I would like to find out form the community if this is considered a best practice or from the purist MVC point of view, would be considered a no-no, and if so, the proposed alternative(s).

Cheers,

-- sb