jQuery: outer html()

想象一下我们有这样的东西:

<div id="xxx"><p>Hello World</p></div>

如果我们这样调用.html函数:

$("#xxx").html();

我们将得到:

<p>Hello World</p>

但我需要:

<div id="xxx"><p>Hello World</p></div>

那么，我需要做什么?我想在#xxx周围添加另一个包装，但这不是一个好主意。

424504 次浏览

小开

如果你不想添加包装器，你可以手动添加代码，因为你知道你的目标ID:

var myID = "xxx";


var newCode = "<div id='"+myID+"'>"+$("#"+myID).html()+"</div>";

小开

没有兄弟姐妹的解决方案:

var x = $('#xxx').parent().html();
alert(x);

通用解决方案:

// no cloning necessary
var x = $('#xxx').wrapAll('<div>').parent().html();
alert(x);

小开

最佳答案

创建一个临时元素，然后clone()和append():

$('<div>').append($('#xxx').clone()).html();

小开

只需使用标准的DOM功能:

$('#xxx')[0].outerHTML

或者用.prop()更简单一点:

$('#xxx').prop('outerHTML')

outerHTML很好地支持-在Mozilla或caniuse进行验证。