原文地址：http://jingyan.baidu.com/article/7f41ececf93b48593d095c25.html

 

包括我自己在内（其实我也就这两天才知道这样可以快速获取的），很多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>');