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周围添加另一个包装，但这不是一个好主意。

如果你不想添加包装器，你可以手动添加代码，因为你知道你的目标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);

这里:http://jsfiddle.net/ezmilhouse/Mv76a/

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

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

只需使用标准的DOM功能:

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

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

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

outerHTML是很好的支持-验证在Mozilla或caniuse。

推荐文章