怎样用jQuery自带方法/函数来获取outerHTML属性

发布网友发布时间：2022-04-07 05:28

我来回答

共5个回答

热心网友时间：2022-04-07 06:57

在开发过程中，jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码，然而我们有时候的确需要，可以通过jQuery.prop("outerHTML")的方式设置。

很多jQuery的使用者都对这一问题深感疑惑。为什么在众多方便的各种获取属性和设置属性的方法中就不能像DOM中一样直接设置html元素的outerHTML呢？

因为原生JS DOM里有一个内置属性 outerHTML （看清大小写哦，JS是区分大小写的）用来获取当前节点的html代码(包含当前节点)，所以用jQuery的prop()能拿到

一、jquery获取outerhtml

<div class="test"><p>hello，你好！</p></div>
<script>
$(".test").prop("outerHTML");
</script>

二、jquery设置outerhtml

$(
'.test'
).prop(
'outerHTML'
,
'<input>'
);

热心网友时间：2022-04-07 08:15

用jQuery自带方法/函数来获取outerHTML属性的方法：
1、定义方法outerHTML：

jQuery.fn.outerHTML = function(s) {
return s
? this.before(s).remove()
: jQuery("<p>").append(this.eq(0).clone()).html();
};

2、使用举例：
有如下html标签：<div id="xxx"><p>Hello World</p></div>获取Hello World的方法：
outerHTML('<p>Hello World</p>');
3、输出结果：
Hello World

热心网友时间：2022-04-07 09:50

假设要获取的元素id为#ele，首先得到该元素的jquery对象。

var $ele = $('#ele');

然后调用var outerHTML = $ele.prop('outerHTML');

上一步中所得到的outerHTML即为所需的值。

也可以通过$ele.prop('outerHTML', '<span>设定的值</span>');给指定的元素设置outerHTML。

具体请参考jquery的API。

热心网友时间：2022-04-07 11:41

$('body').prop('outerHTML')

热心网友时间：2022-04-07 13:49

$("#xxx").html()
$("#xxx p").text()