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

我如何获得'#container'包括'#container'的HTML，而不仅仅是它里面的东西。

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

检查http://jsfiddle.net/rzfPP/58/

Answer 1

如果将容器包装在一个虚拟P标签中，您也将获得容器HTML。

所有你需要做的是

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

在http://jsfiddle.net/rzfPP/68/查看工作示例;

要unwrap() <p>标记完成后，您可以添加

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

Answer 2

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

更新 ：Firefox现在支持FireFox 11（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

Answer 6

 $.fn.outerHtml = function() { if (this.length) { var div = $('<div style="display:none"></div>'); var clone = $(this[0].cloneNode(false)).html(this.html()).appendTo(div); var outer = div.html(); div.remove(); return outer; } else return null; }; 

从http://forum.jquery.com/topic/jquery-getting-html-and-the-container-element-12-1-2010

Answer 7

老人，但goldie …

由于用户要求jQuery，我会保持简单：

 var html = $('#container').clone(); console.log(html); 

在这里拨弄。

Answer 8

Firefox不支持outerHTML ，所以你需要定义一个函数来支持它：

 function outerHTML(node) { return node.outerHTML || ( function(n) { var div = document.createElement('div'); div.appendChild( n.cloneNode(true) ); var h = div.innerHTML; div = null; return h; } )(node); } 

然后，你可以使用outerHTML：

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

Answer 9

 var x = $($('div').html($('#container').clone())).html(); 

Answer 10

举个简单的解决scheme：

 <div id="id_div"> <p>content<p> </div> 

将此DIV移动到其他ID为“other_div_id”的DIV

 $('#other_div_id').prepend( $('#id_div') ); 

完