码迷,mamicode.com
首页 > Web开发 > 详细

jquery获取自身元素的html

时间:2016-03-21 19:57:03      阅读:340      评论:0      收藏:0      [点我收藏+]

标签:

在开发过程中,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>

二、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

标签:

原文地址:http://www.cnblogs.com/youxin/p/5303030.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!