在不同的div中使用ajax打开和关闭html标签

Question

I need to make this. I need to open with ajax a form tag in a div, but i need to close this form in other div below, like this:

opening form(header div)

  $('#header').html("<form action = '/company/create' method = 'POST'>"+
                     "<div>"+
                     //code
                     "</div>");

closing form(body div)

 $('body').html("<div>"+
               //code
               "</div>"+
               "</form>");

i tried two methods, append() and html().

Answer 1

You can't do this. You have to build the entire html string before using jquery's html function. This snippet shows what happens when you try to generate html with just an open tag-- jQuery automatically adds the end tags for you. The snippet will then ask you to continue, where it appends the result of html that has just an ending </form> tag. The closing tags that don't have matching opening tags are thrown away.

 // borrowed from http://stackoverflow.com/questions/3614212/jquery-get-html-of-a-whole-element jQuery.fn.outerHTML = function() { return jQuery('<div />').append(this.eq(0).clone()).html(); }; var x = $('<form>'); //display what jquery built for us when we only supply an open tag. $('#result1_1').text(x.outerHTML()); // display what happens when we try to append additional html with a closing tag for the first bit. var next = $('<div><p>stuff</p></form>') $('#result1_2').text(x.outerHTML() + next.outerHTML());

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> Result 1.1: display what jquery built for us when we only supply an open tag. <div id="result1_1"> </div> <br /><br /> Result 1.2:display what happens when we try to append additional html with a closing tag for the first bit. <div id="result1_2"> </div>

This snippet should be how you do it, building the entire html string at once.

 jQuery.fn.outerHTML = function() { return jQuery('<div />').append(this.eq(0).clone()).html(); }; var x = "<form><div>"; x += "<p>stuff</p></div>"; x += "</form>"; // now that the entire html string is built (at least, entire innards with open and closing tags), // we can let jquery create the elements. $('#result2').text($(x).outerHTML()); $('#sampleHtml').html(x);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> Text output: <div id="result2"> </div> <br /><br /> Html Sample: <div id="sampleHtml"> </div>

Answer 2

I could resolve this problem using .appendTo of jquery. I created a form and I put inside it two div, as you can see in the following example.

<div id = "box">
 <div id = "header"></div>
 <div id = "body"></div>
<div>

using .appendTo I did this

-firts: I created the form inside the div box

$('#box').append('<form id = "box-form"></form>');

-second: I put the header and body div into created form

$('#header').appendTo('#box-form');
$('#body').appendTo('#box-form');

This is the final result

<div id = "box">
 <form id = 'box-form'>
     <div id = "header"></div>
     <div id = "body"></div>
 </form>
<div>