我們一般來說,我們都知道要透過Jquery取得元素的內容(子元素)的時候。都會使用 html() 或是 innerHTML。

ex:
innerHTML

<!DOCTYPE html>
<html>
<body>


<p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>


<script>
function myFunction() {
    alert(document.getElementById("demo").innerHTML)
}
</script>


</body>
</html>

他會顯示跳出警告式窗,上面有  Click me to change my HTML content (innerHTML).

html()

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    alert($("p").html());
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">顯示元素內容</button>
</body>
</html>

</html>

他會顯示跳出警告式窗,上面有  This is a paragraph

 

但是,主體物件並不會選取顯示出來。後來查一查,還真有方法可以做到jQuery.prop("outerHTML")

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    alert($("p").prop("outerHTML"));
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">顯示元素內容</button>
</body>
</html>

</html>

他會顯示跳出警告式窗,上面有  <p>This is a paragraph.</p>

原生JS DOM里有一個内置屬性 outerHTML (看清大小寫哦,JS是區分大小寫的)用來獲取當前節點的html代碼(包含當前節點),所以用jQuery的prop()能拿到

如果你用attr('outerHTML'),

, , , ,

expect7 發表在 痞客邦 PIXNET 留言(0) 人氣()