Question

我需要做到这一点。我需要在div中用ajax打开一个表单标签，但是我需要在下面的其他div中关闭这个表单，如下所示：

开场表格（标题div）

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

结束表格（正文div）

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

我尝试了两种方法，append（）和html（）。

Answer 1

你不能这样做。在使用jquery＆＃39; html函数之前，您必须构建整个html字符串。此代码段显示了当您尝试使用开放标记生成html时会发生什么 - jQuery会自动为您添加结束标记。然后，该代码段会要求您继续，其中会附加仅包含结尾</form>标记的html结果。没有匹配开头标签的结束标签会被丢弃。

＆＃13;

// 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());

＆＃13;

<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>

＆＃13;

这段代码应该是你如何做的，一次构建整个html字符串。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 2

我可以使用jquery的.appendTo解决此问题。我创建了一个表单，并在其中放入了两个div，如下例所示。

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

使用.appendTo我做了这个

-firts：我在div框中创建了表单

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

-second：我将标题和正文div放入已创建的表单

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

这是最终结果

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

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

2 个答案: