I have come across a weird behavior.

I would like to output the following html:

<h5 class="toggle_div"><a href="javascript:void(0);">Text</a></h5>

<div class="facets"></div>

<div style="clear:both;"></div>

To do this, i thought running the following command would work:

$('<h5 class="toggle_div"></h5>').append($('<a href="javascript:void(0);"></a>').text("Text")).after('<div class="facets" id="test"></div>').after('<div style="clear:both;"></div>');

But it does not. I only get the first header (<h5> and the <a>).

However, the following works:

$('<h5></h5>').addClass('toggle_div').append($('<a href="javascript:void(0);"></a>').text("coucou")).after('<div class="facets" id="test"></div>').after('<div style="clear:both;"></div>');

All i did was set the class of the first created element AFTER its creation.

It does not seem right since i also set classes inside the other elements...