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 相关文章推荐
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
JS定义类的六种方式详解
May 12 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 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
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
react 生命周期实例分析
2020/05/18 Javascript
Python的re模块正则表达式操作
2016/05/25 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
Python SQLite3简介
2018/02/22 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
在django中自定义字段Field详解
2019/12/03 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
介绍一下Ruby的多线程处理
2013/02/01 面试题
爱心捐助倡议书
2014/05/19 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
杨善洲观后感
2015/06/04 职场文书
保护环境的宣传语
2015/07/13 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
Python socket如何解析HTTP请求内容
2022/02/12 Python
Redis高并发缓存架构性能优化
2022/05/15 Redis