Question

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

Answer 1

什么是outerHTML

outerHTML，中文意为图例分析，用于获取元素内的html内容和文本。

与JQ的$().html()所不同的是，jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码。而outerHTML则包含本身的代码

例HTML：

<p id="testid"><span>这是一段Html代码</span></p>

它的html()为：

<span>这是一段Html代码</span>

而有时候回需要包含当前节点的代码，所以就用到了outerHTML，也就是

<p id="testid"><span>这是一段Html代码</span></p>

如何使用jQuery获取outerHTML

原生的JS Dom中有一个内置属性叫做：outerHTML (注意大小写敏感)获取包含当前节点的HTML代码。所以可以用JQ中的prop()获取，以上文代码为例

$('#testid').prop("outerHTML")

完整代码示例

<script src="


<p id="testid"><span>这是一段Html代码</span></p>

<script type="text/javascript">
	console.log("节点内的HTML代码\n"+$('#testid').html());
	console.log("包含节点的HTML代码\n"+$('#testid').prop("outerHTML"));
</script>

Answer 2

包括我自己在内（其实我也就这两天才知道这样可以快速获取的），很多jQuery的使用者都对这一问题深感疑惑。为什么在众多方便的各种获取属性和设置属性的方法中就不能像DOM中一样直接设置html元素的outerHTML呢？
原生DOM中获取和设置html元素的outerHTML大家都很熟悉：
// 原生DOM获取outerHTML
alert('原生DOM获取outerHTML');
alert(document.getElementById('lz66303').outerHTML);
// 原生DOM设置outerHTML
alert('原生DOM设置outerHTML');
document.getElementById('lz66303').outerHTML = '<textarea id="lz66303"><hr>原生DOM设置outerHTML</textarea>';
当然在jQuery中我们可以用.prop()方法来获取和设置html元素的outerHTML，在网上若搜索jQuery获取outerHTML竟然还有人写出函数来了，可悲！——jQuery自带的方法不知还自以为自己写个函数这种方法是什么好的解决方案。
当你看到本文时，请转给更多还在用自定义函数获取outerHTML的jQuery使用者——我这个经验就没白分享了！
其实就这么简单：
// 成功获取到
alert('jQuery.prop()获取outerHTML');
alert($('textarea').prop('outerHTML'));
// 成功设置，已生效
alert('jQuery.prop()设置outerHTML');
$('textarea').prop('outerHTML', '<input>');

Answer 3

获取outerHTML属性
$('#id').prop('outerHTML')

设置outerHTML属性
$('#id').prop('outerHTML','<div>')

Answer 4

var ceshi=document.getElementById('ceshi');
alert(ceshi.outerHTML);
jQuery：
alert($('#ceshi').prop('outerHTML'));

Answer 5

jquery对象.html()