jquery append 跟html里的效果不一样

jquery append 和html里的效果不一样
js:
<script type="text/javascript">
        $(document).ready(function () {
            var mainmenu = $("#mainmenu");
            mainmenu.append("<div title='Title1'>444</div>");

html:
<div data-options="region:'west',split:true" title="系统功能菜单" style="width:200px;">
        <div id="mainmenu" class="easyui-accordion" data-options="fit:true,border:false">
            <div title='Title1'>555</div>
        </div>
    </div>

效果图：


js里append出来的div与手写在html里的div效果不同，什么原因？
------解决思路----------------------
因为easyui的初始化事件只在DOM ready后执行一次

放到html中可以初始化，js动态append的代码是不会再次执行accordion初始化代码的（除非你的append代码在dom未准备好时添加）

<div data-options="region:'west',split:true" title="系统功能菜单" style="width:200px;">

        <div id="mainmenu" class="easyui-accordion" data-options="fit:true,border:false">

            <div title='Title1'>555</div>

        </div>

    </div>

<script type="text/javascript">

            var mainmenu = $("#mainmenu");

            mainmenu.append("<div title='Title1'>444</div>");

</script>

要么你就用accordion的add方法来添加，而不是使用jquery的html

add  options  Add a new panel. By default the added panel will become selected. To add a unselected new panel, pass the 'selected' property and set it to false.

Code example:

$('#aa').accordion('add', {

	title: 'New Title',

	content: 'New Content',

	selected: false

});