为什么我使用 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());
   });
 });