jQuery:外部html()[重复]

本文讨论了在不添加额外包装器的情况下,如何使用jQuery获取指定元素的完整外层HTML代码,包括元素本身及其所有子元素。提供了多种实现方法,如手动构造字符串、使用父元素的HTML方法、创建临时元素进行克隆等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文翻译自:jQuery: outer html() [duplicate]

Possible Duplicate: 可能重复:
Get selected element's outer HTML 获取所选元素的外部HTML

imagine what we have something like this: 想象我们有这样的东西:

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

if we call .html function in this way: 如果我们以这种方式调用.html函数:

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

we will get: 我们将得到:

<p>Hello World</p>

But i need to get: 但我需要得到:

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

So, what i need to do? 那么,我需要做什么? I think to add another wrapper around #xxx, but this is not a good idea. 我想在#xxx周围添加另一个包装器,但这不是一个好主意。


#1楼

参考:https://stackoom.com/question/O6KV/jQuery-外部html-重复


#2楼

If you don't want to add a wrapper, you could just add the code manually, since you know the ID you are targeting: 如果您不想添加包装器,则可以手动添加代码,因为您知道要定位的ID:

var myID = "xxx";

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

#3楼

No siblings solution: 没有兄弟姐妹解决方案:

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

Universal solution: 通用解决方案

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

Fiddle here: http://jsfiddle.net/ezmilhouse/Mv76a/ 在这里小提琴: http//jsfiddle.net/ezmilhouse/Mv76a/


#4楼

创建一个临时元素,然后clone()append()

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

#5楼

Just use standard DOM functionality: 只需使用标准DOM功能:

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

outerHTML is well supported - verify at Mozilla or caniuse . outerHTML得到很好的支持 - 在Mozillacaniuse验证。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值