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

 

  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。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM