Open and close html tag with ajax in different div

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().

Have you looked at [jQuery prepend() method](http://www.w3schools.com/jquery/html_prepend.asp)? — Grigor, Oct 22 '15 at 22:04
Your code snippets will remove all content of `#header` and `body` and replace them with `html()` argument content, which is not the goal as I think. Try using `append()` and `prepend()` as mentionned by Grigor — Adib Aroui, Oct 22 '15 at 22:10
I suspect that there is a simpler way of doing what you are looking for. Could you please describe the problem you are facing, rather than what it is about your proposed solution that is not working? — wahwahwah, Oct 22 '15 at 22:36

score 0 · Answer 1 · answered Oct 22 '15 at 22:31

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>

score 0 · Accepted Answer · answered Oct 26 '15 at 16:08

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>

Open and close html tag with ajax in different div

2 Answers2