在开发过程中，jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码，然而我们有时候的确需要，可以通过jQuery.prop("outerHTML")的方式设置。

很多jQuery的使用者都对这一问题深感疑惑。为什么在众多方便的各种获取属性和设置属性的方法中就不能像DOM中一样直接设置html元素的outerHTML呢？

因为原生JS DOM里有一个内置属性 outerHTML （看清大小写哦，JS是区分大小写的）用来获取当前节点的html代码(包含当前节点)，所以用jQuery的prop()能拿到
 
一、jquery获取outerhtml

1
2
3
4
<div class="test"><p>hello，你好！</p></div>
<script>
$(".test").prop("outerHTML");
</script>

html() 函数改变所匹配的 HTML 元素的内容（innerHTML）。

  1. .html()用为读取和修改元素的HTML标签
  2. .text()用来读取或修改元素的纯文本内容
  3. .val()用来读取或修改表单元素的value值。

二、jquery设置outerhtml

1
$('.test').prop('outerHTML', '<input>');

希望本文所述对大家的jQuery程序设计有所帮助。

一种办法;

 1 <html>

 2 <head>

 3     <title>jQuery获取自身HTML</title>

 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 5     <meta http-equiv="Content-Language" content="zh-CN" />

 6     <script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>

 7 </head>

 8 <body>

 9 <div class="aa" style="border:1px solid #ABC;width:200px;text-align:center;">点击获取我自身的HTML吧</input>

10 <script type="text/javascript">

11 $(document).ready(function(){

12 $(".aa").click(function(){alert($("<p>").append($(this).clone()).html())});

13 });

14 </script>

15 </body>

16 </html>

原理：创建一个匿名Object，然后将自身加入其中，再取出匿名Object的html()便可得到自身HTML。

jquery获取自身元素的html的更多相关文章

  1. jquery获取当前元素的坐标

    jquery获取当前元素的坐标 1,获取对象 var obj = $("#id号"); 或  var obj = $(this); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗 ...

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

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

  3. jquery获取html元素的绝对位置和相对位置

    jquery获取html元素的绝对位置坐标和相对父元素的位置坐标方法:绝对位置坐标:$("#elem").offset().top$("#elem").offs ...

  4. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  5. jquery获取当前元素坐标

    1. jquery获取当前元素坐标 A) 获取对象

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

    使用jquery获取父元素或父节点,比较简单,jquery提供了丰富的方法来让我们使用jquery获取父元素或父节点   jquery获取父元素方法比较多,比如parent(),parents(),c ...

  7. jquery获取父元素或父节点的方法

    jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个例子: <ul class=" ...

  8. jquery获取子元素

    Jquery获取子元素的方法有2种,分别是children()方法和find()方法. 下面我们分别来使用这两种方法,看看它们有何差异. children()方法:获取该元素下的直接子集元素 find ...

  9. Jquery获取父元素

    jquery获取父元素 方法:parent(),parents(),closest() 栗子: <ul class="parent1"> <li><a ...

  10. jQuery获取Select元素

    jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...});   //为Se ...

随机推荐

  1. mysql控制台命令

    * mysql 链接服务器 mysql -h localhost  -u root -p show processlist; update mysql.user set authentication_ ...

  2. A Realistic Evaluation of Memory Hardware Errors and Software System Susceptibility

    http://www.cs.rochester.edu/~kshen/papers/usenix2010-li.pdf Abstract Memory hardware reliability is ...

  3. 微信公众账号开发教程（三） 实例入门：机器人(附源码) ——转自http://www.cnblogs.com/yank/p/3409308.html

    一.功能介绍 通过微信公众平台实现在线客服机器人功能.主要的功能包括:简单对话.查询天气等服务. 这里只是提供比较简单的功能,重在通过此实例来说明公众平台的具体研发过程.只是一个简单DEMO,如果需要 ...

  4. php + ajax + html 简单跨域问题

    XMLHttpRequest cannot load http://localhost:8080/abc/index.php. No 'Access-Control-Allow-Origin' hea ...

  5. AP_总体业务及方案

    AP关键业务点说明 关键业务点 说明 预付款余额收回 1. 在应付款管理系统中输入一张虚拟发票,该发票的目的是在系统中冲减对供应商的预付款额,其金额等于预付款的未核销金额,供应商为原供应商. 借:其他 ...

  6. SQL查询中关于索引使用的笔记

    建表KeyLevelStat (无主键),2个索引: CREATE TABLE KeyLevelStat( [Date] [int] NOT NULL, [Num] [varchar](8), [R0 ...

  7. myeclipse调式与属性显示

    最近做项目的时候发现一个奇怪的东西,当我用myeclipse调式时,调式窗口显示实体user所关联的role的对象属性是空的,但是,从syst打印出来是有的,最近感到很奇怪,后来发现这只是调式的一种显 ...

  8. Android源码剖析之Framework层升级版（窗口、系统启动）

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 看本篇文章之前,建议先查看: Android源码剖析之Framework层基础版 前面讲了frame ...

  9. SQL Server存储机制

    1.区段 区段(extent)是用来为表和索引分配空间的基本存储单元.它由8个连续的64KB数据页组成. 基于区段(而不是实际使用空间)分配空间的概念的要点: 一旦区段已满,那么下一记录将要占据的空间 ...

  10. C中文件操作说明

    r 以只读方式打开文件,该文件必须存在. r+ 以读/写方式打开文件,该文件必须存在. rb+ 以读/写方式打开一个二进制文件,只允许读/写数据. rt+ 以读/写方式打开一个文本文件,允许读和写. ...