在开发过程中,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,这样也是可行的,但是代码繁琐。

jQuery 获取当前节点的html包含当前节点的方法的更多相关文章

  1. 关于jQuery获取不到动态添加的元素节点的问题

    遇到问题: 当我获取 $("#art-list")页面元素后去在后面追加标签的时候(append),在下面用 $(selector) 获取刚刚添加的标签,发现怎么都获取不到. 问题 ...

  2. jquery获取<div></div>之间的内容.text() 和 .html()区别

    jQuery 获取 div 之间的内容,有两种方法,$(selector).text().$(selector).html() . html: <div> <p>test< ...

  3. easyui Tree模拟级联勾选cascadeCheck,节点选择,父节点自动选中,节点取消,父节点自动取消选择,节点选择,所有子节点全部选择,节点取消,所有子节点全部取消勾选

    最近项目中用到easyui tree,发现tree控件的cascadeCheck有些坑,不像miniui 的tree控件,级联勾选符合业务需求,所以就自己重新改写了onCheck事件,符合业务需求.网 ...

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

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

  5. jquery获取节点的时候获取包含自己在内的HTML标签

    jquery获取某个标签的html()方法的时候总是只能获取内部的 如果获取包含自身的HTML代码呢? 用.prop("outerHTML")方法获取 <div id=&qu ...

  6. 使用jquery获取父元素或父节点的方法

    今天面试题问到了,没答上,jq要继续学习啊 jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个 ...

  7. js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

    转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...

  8. jQuery获取父级、兄弟节点的方法

    一.jQuery的父节点查找方法 $(selector).parent(selector):获取父节点 $(selector).parentNode:以node[]的形式存放父节点,如果没有父节点,则 ...

  9. jQuery获取节点和子节点文本的方法

    本节主要介绍了jQuery如何获取节点和子节点文本,下面有个示例,大家可以参考下 对于下面的html片段, ? 1 <div id="text_test">test t ...

随机推荐

  1. 【DP】HDU 1176

    HDU 1176 免费馅饼 题意:中文题目不解释. 思路:因为是从中间出发所以思路卡了许久,还在之前做了道HIHO入门的题.能想到的点,从时间思考,然后初始化1s的时候,4,5,6,的数值要特别赋值. ...

  2. javascript面向对象(三):非构造函数的继承

    本文来自阮一峰 这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使用构造函数实现"继承" ...

  3. Python打包成exe:屡试不爽的cxfreeze!

    Python用cxfreeze打包,不用像什么Pyinstaller繁杂的写配置文件,一行命令足以! 安装好cxfreeze后,进行python脚本目录,执行: C:\Python27\Scripts ...

  4. MySQL黑科技用法总结(持续更新)

    1.利用set插入数值 insert [into] 表名 set 列=值.  2.利用select对字段进行测试 ) ,并且有2条记录 ',num1+1的计算结果 tips:相等返回1,否则返回0 f ...

  5. HDU3371 最小生成树

    Connect the Cities Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  6. 建设移动端web开发会涉及到的meta标签

    <meta name="format-detection" content="telephone=no"> <meta name=" ...

  7. css3动态旋转魔方练习

    图片素材: html部分: <!DOCTYPE html><html><head> <meta charset="utf-8" /> ...

  8. Elasticsearch 运维实战之1 -- 集群规划

    规划一个可用于生产环境的elasticsearch集群. 集群节点划分 整个集群的节点分为以下三种主要类型 Master nodes -- 负责维护集群状态,不保存index数据, 硬件要求: 一般性 ...

  9. 利用JS生成01010101……长度可控的序列

    function ab(d){ var a = []; var x = 1 ; for (var i = 0; i < d; i++) { if (x == 0) { x = x + 1; } ...

  10. 展望 2017年商业智能BI 发展的趋势

    在展望2017年商业智能 BI 发展趋势前,我们先来了解一下商业智能 BI 发展的几个重要阶段. 传统 BI 和新型 BI 的分水岭(2013年) 大背景 在2013年以前相当长的一个周期(2005年 ...