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

【问题标题】：Open and close html tag with ajax in different div在不同的div中使用ajax打开和关闭html标签
【发布时间】：2015-10-27 00:08:40
【问题描述】：

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

打开表单（标题 div）

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

结束形式（body div）

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

我尝试了两种方法，append() 和 html()。

【问题讨论】：

你看过jQuery prepend() method吗？
您的代码 sn-ps 将删除 #header 和 body 的所有内容并用 html() 参数内容替换它们，这不是我认为的目标。尝试使用 Grigor 提到的 append() 和 prepend()
我怀疑有一种更简单的方法可以做您正在寻找的事情。您能否描述一下您面临的问题，而不是您提出的解决方案不起作用的原因？

标签： javascript jquery html ajax

【解决方案1】：

你不能这样做。在使用 jquery 的 html 函数之前，您必须构建整个 html 字符串。这个 sn-p 显示了当您尝试仅使用打开标签生成 html 时会发生什么——jQuery 会自动为您添加结束标签。然后 sn-p 会要求您继续，它会在其中附加 html 的结果，该结果只有一个结尾 </form> 标记。没有匹配的开始标签的结束标签被丢弃。

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

这个sn-p应该是你怎么做的，一次构建整个html字符串。

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>

【讨论】：

【解决方案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：我将 header 和 body 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>

【讨论】：