jQuery获取包含容器本身的容器的html

Question

我如何获得'#container'上的html,包括'#container',而不仅仅是内部的内容.

<div id="container">
 <div id="one">test 1 </div>
 <div id="two">test 2 </div>
 <div id="three">test 3 </div>
 <div id="four">test 4 </div>
</div>

我有这个获取#container内的html.它不包括#container元素本身.这就是我想要做的

var x = $('#container').html();
$('#save').val(x);

Answer 1

如果将容器包装在虚拟P标记中,您也将获得容器HTML.

你需要做的就是

var x = $('#container').wrap('<p/>').parent().html();

要unwrap()在<p>完成后的标签,你可以添加

$('#container').unwrap();

@ mc10我们可以简单地使用clone(),你不必担心创建额外的元素.`var x = $('#container').clone().wrap('<p />').parent().html();`.包装的想法很棒,并且提供的大多数解决方案都不那么复杂. (17认同)
为什么是`<p>`标签？"<div>"不是更有意义吗？ (6认同)
这有一个更简单的解决方案.看我的回答. (4认同)

Answer 2

var x = $('#container').get(0).outerHTML;

更新:自FireFox 11开始支持Firefox(2012年3月)

正如其他人所指出的,这在FireFox中不起作用.如果你需要它在FireFox中工作,那么你可能想看看这个问题的答案: 在jQuery中,是否有任何类似于html()或text()的函数但是返回匹配组件的全部内容？

Answer 3

var x = $('#container')[0].outerHTML;

Answer 4

我喜欢用这个;

$('#container').prop('outerHTML');

Answer 5

$('#container').clone().wrapAll("<div/>").parent().html();

更新:outerHTML现在可以在firefox上运行,所以除非你需要支持非常旧版本的firefox,否则请使用其他答案