jquery合并元素

我正在重构一个jquery ui小部件。
为了获得更清晰的代码，我使用模板处理基本的html内容。
小部件的基本容器是一个div。小部件用户可以这样设计它：

 <div id="mywidget" class="status" style="margin-top: 10px; width: 250px;"></div>

现在，在小部件源代码中，我有一个字符串中的基本html元素：

 '<div class="ui-grouping ui-widget ui-widget-content ui-corner-all">' +
 '<span class="ui-grouping-detail"><img src="....

“”+
'
当用户使用$（'#mywidget'）.abcd（）创建小部件时；我不想将html字符串附加到基本div中，但我想将该字符串合并到基本div中，以便最终结果如下所示：

 <div id="mywidget" class="status ui-grouping ui-widget ui-widget-contet ui-corner-all" 
   style="margin-top: 10px; width: 250px;">
 <span class="ui-grouping-detail"><img src=" ...


我没有找到函数$（'#mywidget'）。mergeWith（“..”）。

有什么好的解决办法吗？

非常感谢

沃尔夫冈

更新：
谢谢你的回答，迪迪埃·吉斯。

但我想摆脱你提出的解决方案。您的解决方案是在jQueryUI小部件中完成工作的标准方式。
您必须长时间搜索才能找到jquery小部件中模板的用法（以便将标记和javascript分离，从而获得更清晰/更清晰的代码）。
据我所知，在dojo小部件中，在小部件中使用模板要常见得多。
因此，再次感谢Didier Ghys，但我正在寻找另一种解决方案。
我认为您不应该将基本元素存储为字符串，而应该通过编程方式将类等添加到插件用户提供的标记中：

$('<div id="mywidget" class="status" style="margin-top: 10px; width: 250px;"></div>')
    .addClass('ui-grouping ui-widget ui-widget-content ui-corner-all')
    .append('<span class="ui-grouping-detail">')

$（“”）
.addClass（'ui分组ui小部件ui小部件内容ui角点全部'）
.append（“”）

这就是你想要的吗
 

var str=''+
“dskfjsdmf”；
$（“#mywidget”）.addClass（getFirstClass（str））；
$（“#mywidget”）.append（getElementInside（str））；
函数getFirstClass（_str）{
返回$（_str）.closest（'div'）.attr（'class'）；
}
函数getElementInside（_str）{
返回$（_str）.closest（'div'）.children（）；
}
谢谢你，经理，你的回答很有趣。我要了。
var str = '<div class="ui-grouping ui-widget ui-widget-content ui-corner-all">' +
 '<span class="ui-grouping-detail">dskfjsdmf</span></div>';

$("#mywidget").addClass(getFirstClass(str));
$("#mywidget").append(getElementInside(str));

function getFirstClass(_str){
    return $(_str).closest('div').attr('class');
}
function getElementInside(_str){
    return $(_str).closest('div').children();
}