Question

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

Answer 1

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

用jQuery自带方法/函数来获取outerHTML属性：
1、outerHTML() 是js原生的方法，返回DOM节点的内容。返回结果是带html标签的。
<div><span>I live inside a div.</span></div>
2、用jquery操作outerHTML需要重写fn，定义如下：
$.fn.outerHTML = function(){
// IE, Chrome & Safari 都是兼容的
return (!this.length) ? this : (this[0].outerHTML || (
function(el){
var div = document.createElement('div');
div.appendChild(el.cloneNode(true));
var contents = div.innerHTML;
div = null;
return contents;
})(this[0]));
}
3、用法如下：
<span>I live inside a div.</span>使用outerHTML 的时候会返回
<div><span>I live inside a div.</span></div>