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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
javascript 拖放效果实现代码
Jan 22 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 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 裁剪图片成固定大小代码方法
2009/09/09 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
Python语法分析之字符串格式化
2019/06/13 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
python打开文件的方式有哪些
2020/06/29 Python
python如何调用java类
2020/07/05 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
迟到检讨书800字
2014/01/13 职场文书
安全标兵事迹材料
2014/08/17 职场文书
幼师辞职信范文
2015/02/27 职场文书
辩护词范文大全
2015/05/21 职场文书
雷锋之歌观后感
2015/06/10 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
详解Js模块化的作用原理和方案
2021/04/29 Javascript
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python