jquery获取自身元素的html
在开发过程中,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)。
- .html()用为读取和修改元素的HTML标签
- .text()用来读取或修改元素的纯文本内容
- .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的更多相关文章
- jquery获取当前元素的坐标
jquery获取当前元素的坐标 1,获取对象 var obj = $("#id号"); 或 var obj = $(this); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗 ...
- 使用jquery获取父元素或父节点的方法
今天面试题问到了,没答上,jq要继续学习啊 jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个 ...
- jquery获取html元素的绝对位置和相对位置
jquery获取html元素的绝对位置坐标和相对父元素的位置坐标方法:绝对位置坐标:$("#elem").offset().top$("#elem").offs ...
- js与jquery获取父元素,删除子元素的不同方法
var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...
- jquery获取当前元素坐标
1. jquery获取当前元素坐标 A) 获取对象
- 使用jquery获取父元素或父节点
使用jquery获取父元素或父节点,比较简单,jquery提供了丰富的方法来让我们使用jquery获取父元素或父节点 jquery获取父元素方法比较多,比如parent(),parents(),c ...
- jquery获取父元素或父节点的方法
jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个例子: <ul class=" ...
- jquery获取子元素
Jquery获取子元素的方法有2种,分别是children()方法和find()方法. 下面我们分别来使用这两种方法,看看它们有何差异. children()方法:获取该元素下的直接子集元素 find ...
- Jquery获取父元素
jquery获取父元素 方法:parent(),parents(),closest() 栗子: <ul class="parent1"> <li><a ...
- jQuery获取Select元素
jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Se ...
随机推荐
- Unity 为NGUI增加体感输入方式
背景 NGUI在处理UI和输入方面确实做的不错,但是现在的问题是公司引入体感之后,是通过手的位置来实现按钮的点击操作,前提我不想改变原先设计好的NGUI界面和机制,怎么破? NGUI的输入底层机制 N ...
- delimiter
http://www.mysqltutorial.org/getting-started-with-mysql-stored-procedures.aspx The first command is ...
- 验证码识别 edge enhancement - 轮廓增强 region finding - 区域查找
Computer Science An Overview _J. Glenn Brookshear _11th Edition The task of understanding general im ...
- cookie 操作
//创建并赋值 重新赋值也是这样操作 document.cookie="userId=828"; document.cookie="userName=hulk" ...
- 使用第三方分页AspNetPager实现真正分页的SQL原理
AspNetPager是一个第三方分页第三方控件,可以和数据绑定控件(GridView等)方便的结合,实现真分页. 真分页:从数据库中获取符合要求的部分数目的记录.性能较高,数据量小,网络负载小,对数 ...
- 蓝牙—GAP(Generic Access Profile)
1.简介 下图可见GAP在蓝牙协议中的位置和关系 LE中GAP共有四个角色: <1> Boradcaster:发送advertising 事件的设备 <2>Observer:接 ...
- $watch、$digest、$apply
$watch.$digest.$apply $watch 代表的就是对数据源的监听,当数据源发生变化,就会触发第二个参数的回调函数 $digest 代表触发一个数据源变化的事件 $apply 代表对于 ...
- ZooKeeper Recipes and Solutions 翻译
ZooKeeper 秘诀 与解决方案 A Guide to Creating Higher-level Constructs with ZooKeeper Out of the Box Applica ...
- jQuery插件之Wookmark瀑布流
使用方法: 1.下载wookmark.js 2.构建html <div class="wrapper"> <div id="con1_1"&g ...
- A Guide to Creating a Quality Project Schedule
Successful projects start with a good quality project schedule. Creating a schedule is one of the fi ...