在其InnerHTML中附加HTML后，使Div再次可调整大小

我有一个简单的方法div，可以通过使用Jquery UI来调整大小。

<div id="myid_templates_editor_text_1"></div>

jQuery代码：

$('#myid_templates_editor_text_1').resizable({
        animate: true,              
});

这样做之后，它可以正常工作。见下图：

div可以调整大小。使用jQuery调整div的大小后，div的代码结构将变为下面的代码。

<div id="myid_templates_editor_text_1" class="ui-resizable ui-draggable" style="width: 109px; height: 114px; position: absolute; left: 621px; top: 527px;">

    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
    <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>

</div>

我想在可调整大小的div中放置文本，因此我决定通过在它的innerHTML后面附加HTML来在其中放置文本。参见下面的代码：

 var parent = document.getElementById('myid_templates_editor_text_1');      
 parent.innerHTML +=  '<p>Sample Text</p>';

成功追加后，div的调整大小功能会丢失吗？为什么？我应该怎么做才能使其正常工作？