jquery 获取 outerHtml 包含当前节点本身的代码


Posted in Javascript onOctober 30, 2014

在开发过程中,jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然后我们有时候确需要,找遍jQuery api文档也没有任何方法可以拿到。

看到有的人通过parent().html(),如果当前元素没有兄弟元素还行,如果有那就行不通了。后来实验发现有一个jQuery的一个方法可以解决,而且非常简便,如下:

jQuery.prop("outerHTML");

<div class="test"><p>hello,你好!</p></div>

<script>

$(".test").prop("outerHTML");

</script>

输出结果为:<div class="test"><P>hello,你好!</p></div>

因为原生JS DOM里有一个内置属性 outerHTML (看清大小写哦,JS是区分大小写的)用来获取当前节点的html代码(包含当前节点),所以用jQuery的prop()能拿到,经过实验attr()方法是拿不到的,不信的话,大家也可以尝试尝试,谢谢。

当然也有人用jQuery的 clone() 函数配合append() 来创建一个只有一个子元素的节点,然后来拿节点的html,这样也是可行的,但是代码繁琐。

Javascript 相关文章推荐
JavaScript几种形式的树结构菜单
May 10 Javascript
javascript的console.log()用法小结
May 31 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
JS定义类的六种方式详解
May 12 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
jQuery UI实现动画效果代码分享
Aug 19 jQuery
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 #Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 #Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 #Javascript
Js实现网页键盘控制翻页的方法
Oct 30 #Javascript
javascript实现iframe框架延时加载的方法
Oct 30 #Javascript
js中iframe调用父页面的方法
Oct 30 #Javascript
js防止页面被iframe调用的方法
Oct 30 #Javascript
You might like
用PHP制作静态网站的模板框架
2006/10/09 PHP
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
简单了解什么是神经网络
2017/12/23 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
Python切图九宫格的实现方法
2019/10/10 Python
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
最热门的自我评价
2013/12/30 职场文书
《尊严》教学反思
2014/02/11 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技