Как определить разборный JQuery и добавить HTML к нему

Question

У меня два data-role="collapsible" элементы JQuery, как показано на этой скрипке:

http://jsfiddle.net/znz17ctm/16/

На щелчку разборный div, я перехватывать событие.

Как я могу определить и добавить пример div?

$(document).ready(function() { 
    $('.my-collaspible').bind('expand', function() { 
     var elemclciked = $(this).attr('data_attr'); 

     var uihtml = $('<div>Sample Div For Test</div>') 
    }); 
    $('.my-collaspible').bind('collapse', function() { 
     alert('Collapsed'); 
    }); 
}); 

Это HTML из данных-разборного

<div data-role="collapsible" data-inset="false" class="my-collaspible ui-collapsible ui-collapsible-themed-content ui-collapsible-collapsed" data_attr="Haii"> 
     <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-inherit">Haii <a class="icon-pencil-1 labelEditIcon ui-link"></a><span class="ui-collapsible-heading-status"> click to expand contents</span></a></h3> 
     <div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true"></div> 
     </div> 

Моего вопроса могу я удалить все содержимое класса сОн данных-роль = «разборный», так что он выглядит точно так же, как

<div data-role="collapsible" data-inset="false" class="my-collaspible ui-collapsible ui-collapsible-themed-content ui-collapsible-collapsed" data_attr="Haii"> 
</div> 

Answer 1

вы можете добавить сделать так:

$('.my-collaspible').bind('expand', function() { 
    var elemclciked = $(this).attr('data_attr'); 

    var uihtml = $('<div>Sample Div For Test</div>') 
    $(this).append(uihtml); 
});