What behaviour should be preferred for widget initialization:
1) Required HTML is generated by widget itself:
Layout:
<div id="my-widget"/>
Initialization:
$('#my-widget').myWidget(); // Creates HTML
2) Required HTML is placed to the page by user:
<div id="my-widget">
<div class="foo"/>
<div class="bar"/>
</div>
Initialization:
$('#my-widget').myWidget(); // Won't create nested div's
Mark Otto (one of Bootstrap creators) suggest not to generate markup by javascript: https://github.com/mdo/code-guide#javascript-generated-markup
Currently, I use the following function, which appends element to the root of the widget (this.$element) only if it doesn't exist:
function($content) {
var $child = this.$element.children('.' + $content.attr('class'));
return $child.length ? $child : $content.appendTo(this.$element);
};
