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

如题所述

用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
温馨提示:内容为网友见解,仅供参考
第1个回答  2016-03-24
包括我自己在内(其实我也就这两天才知道这样可以快速获取的),很多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>');本回答被提问者采纳
第2个回答  2016-04-19
$("#id")[0].outerHTML
这是一个取巧的方法,$("#id") 返回的是 JQ的包装对象,再取[0]返回的就是原生的dom节点,这时候就可以直接调用 outerHTML 了
也就是说 $("#id")[0]==document.getElementById("id");
相似回答