為什么我使用 JQuery 得到的只是文本而不是 HTML？

Question

我有一個 H1 標簽，我想在單擊按鈕時獲取此元素的HTML() ，但現在只獲取文本而不是 HTML。 我怎樣才能得到正確的 HTML？

我的代碼：-

 $(function(){ $('button').click(function(){ alert($('h1').html()); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1 style="color:indianRed">Heading 1</h1> <button>Click</button>

Answer 1

你應該使用outerHTML ：

Element DOM 接口的outerHTML屬性獲取描述元素及其后代的序列化 HTML 片段。 它還可以設置為用從給定字符串解析的節點替換元素。

 $(function(){ $('button').click(function(){ alert($('h1').get(0).outerHTML); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1 style="color:indianRed">Heading 1</h1> <button>Click</button>

Answer 2

javascript中的outerHTML

 $(function(){ $('button').click(function(){ alert(document.querySelector("h1").outerHTML); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1 style="color:indianRed">Heading 1</h1> <button>Click</button>

Answer 3

在.html()函數返回內部HTML元素，獲得outerHTML任何給定的元素，試圖將其包裝容器內，然后用得到他的HTML .html()

$(function(){
  $('button').click(function(){
        var elHTML = $('<div></div>').append($('h1'));
       alert(elHTML.html());
   });
 });