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 no-repeat写法 背景不重复
Mar 18 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
vue项目中将element-ui table表格写成组件的实现代码
Jun 12 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
countup.js实现数字动态叠加效果
Oct 17 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
关于尾递归的使用详解
2013/05/02 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
Python多线程编程(五):死锁的形成
2015/04/05 Python
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
共产党员公开承诺书
2014/03/25 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
蜗居观后感
2015/06/11 职场文书
银行求职信怎么写
2019/06/20 职场文书
2019银行竞聘书
2019/06/21 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书