将元素设为父元素

Question

I have an existing HTML as;

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

I am creating a jQuery form dynamically as ;

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

Now I want this "form" element to become the parent of the existing "maincontent" div

So the DOM should then look like;

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

How do I do this using jQuery?

Also I am getting Expected identifier in IE for this line (works fine in Firefox);

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

Answer 1

You should use wrap :

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

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

Answer 2

A great solution is provided here: How to move child element from one parent to another using jQuery .

Here's the code:

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

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