JQuery 获取容器的 html，包括容器本身

我如何得到包括“ # 容器”在内的“ # 容器”上的 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>

我有这样一个函数，它可以把 html 放到 # 容器中。它不包括 # Container 元素本身。这就是我想做的

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

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

110962 次浏览
小开 
var x = $('#container').get(0).outerHTML;

更新 : 从 FireFox 11(2012年3月)开始，FireFox 现在支持这个功能

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

小开 
var x = $($('div').html($('#container').clone())).html();
小开 
var x = $('#container')[0].outerHTML;
小开 
$('#container').clone().wrapAll("<div/>").parent().html();

更新: outerHTML 现在可以在 firefox 上工作，所以使用其他的解决方案，除非你需要支持非常老版本的 firefox

小开 
$.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

小开

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

然后，您可以使用 outHTML:

var x = outerHTML($('#container').get(0));
$('#save').val(x);
小开
最佳答案

如果将容器包装在一个虚拟的 P标记中，也将得到容器 HTML。

你只需要

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

检查 http://jsfiddle.net/rzfPP/68/的工作实例

完成 <p>标记后，可以添加

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

简单的解决方案:

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

用 id = “ other _ DIV _ id”将这个 DIV 移动到其他 DIV

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

结束

小开

我喜欢用这个

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

虽然老，但是很好。

因为用户要求使用 jQuery，所以我将保持简单:

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

小提琴。


提交答案