javascript - 将元素设为父元素

Question

我有一个现有的 HTML；

<div id="maincontent">
        <div id="firstname_lbl"></div>
        <div id="firstname_fld"></div>
</div>

我正在动态创建一个 jQuery 表单；

$('<' + items.type + '/>').attr({
        "action": items.action,
         "name": items.name,
         "class": items.attributes.class
        })

现在我希望这个“form”元素成为现有“maincontent”div的父元素

所以 DOM 应该是这样的；

<form>
<div id="maincontent">
            <div id="firstname_lbl"></div>
            <div id="firstname_fld"></div>
    </div>
</form>

我如何使用 jQuery 做到这一点？

此外，我在 IE 中获得了该行的预期标识符（在 Firefox 中运行良好）；

var formEle = $('<' + items.type + '/>').attr({
        "action": items.action,
         "name": items.name,
         "class": items.attributes.class});

Answer 1

你应该使用wrap：

var form = $("<" + items.type + "/>").attr({
    action: items.action,
    name: items.name,
    "class": items.attributes["class"]
});

$("#maincontent").wrap(form);

Answer 2

这里提供了一个很好的解决方案：How to move child element from one parent to another using jQuery。

这是代码：

(function($){
    $.fn.moveTo = function(selector){
        return this.each(function(){
            var cl = $(this).clone();
            $(cl).appendTo(selector);
            $(this).remove();
        });
    };
})(jQuery);

$('#maincontent').moveTo('[FormSelectorHere]');