jquery获取自身元素的html

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

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

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

一、jquery获取outerhtml

<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。

时间： 2024-08-25 18:05:12

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

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

jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: <ul class="parent1"> <li><a href="#" id="item1">jquery获取父节点</a></li> <li><a href="#">jquery获取父元素&l

jQuery获取当前元素的上一个元素: 本章节介绍一下如何利用jquery获取当前元素的下一个元素,如何利用原生js获取下一个元素可以参阅原生js获取当前元素的上一个元素代码实例一章节, 下面直接看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texia

jQuery -> 获取后代元素的三种方法

如果我们有内容如下的html文件,那么如何选取包含在<p>元素内的<i>元素呢? 邪馬台国の謎と弥生時代紀元前1000年ごろ.水稲工作の技術をもつ集団が大挙して日本に移住してきた.これによって弥生時代が始まった. 縄文人も南方から伝わった稲を栽培していたが.彼らは原野を開いて大掛かりな水田をつくる発想を持たなかった.しかし.北九州に新たな文化を持って集団が来たのを知った彼らは次第に.水稲工作を受け入れ弥生人へとか分かっていた. html源码如下 <h1>邪馬台国の謎と

jquery获取子元素

Jquery获取子元素的方法有2种,分别是children()方法和find()方法. 下面我们分别来使用这两种方法,看看它们有何差异. children()方法:获取该元素下的直接子集元素 find()方法:获取该元素下的所有(包括子集的子集)子集元素分别以以下HTML代码为例: <ul> <li>list1 <ul> <li>list1-1</li> <li>list1-2</li> </ul> <

jQuery 获取兄弟元素的几种方法

jQuery 获取兄弟元素的几种方法. 获取指定元素的兄弟元素时,可以使用adjacent sibling combinator (+),其中+的两侧内容都是selector expression. 如果要获取下例中所有的 h1的直接兄弟元素h2 <div> <h1>Main title</h1> <h2>Section title</h2> <p>Some content...</p> <h2>Section

bobo jquery获取当前元素下的子元素的子元素

<div class="Bg01"><ul><li class="Bold">黑域名告警</li><li>总数:<span class="Mycolor">24条</span></li><li>未处理:<span class="Myred">03条</span></li></ul

jQuery -> 获取兄弟元素

获取指定元素的兄弟元素时,可以使用adjacent sibling combinator (+),其中+的两侧内容都是selector expression. 如果要获取下例中所有的 h1的直接兄弟元素h2 <div> <h1>Main title</h1> <h2>Section title</h2> <p>Some content...</p> <h2>Section title</h2> &l

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

jquery获取html元素的绝对位置坐标和相对父元素的位置坐标方法: 绝对位置坐标: $("#elem").offset().top $("#elem").offset().left 相对父元素的位置坐标: $("#elem").position().top $("#elem").position().left 另: static(默认):默认定位方式. relative(相对定位):在static的基础上,相对元素本来的位

jQuery获取某元素下所有的链接元素

jQuery获取某元素下所有的链接元素: 在某些情况下需要获得某些元素下的所有链接,下面就介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落&l

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

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