.html()

分類：屬性 | 操作 > DOM 插入，內部
取得已配對元素集合中第一個元素的 HTML 內容，或設定每個已配對元素的 HTML 內容。

內容

.html()傳回：字串

說明：取得已配對元素集合中第一個元素的 HTML 內容。

  • 新增版本：1.0.html()

    • 此方法不接受任何參數。

此方法不適用於 XML 文件。

在 HTML 文件中，.html() 可用於取得任何元素的內容。如果選取器表達式配對到多個元素，只有第一個配對的 HTML 內容會傳回。請考慮以下程式碼

1
 
$( "div.demo-container" ).html();

為了擷取以下 <div> 的內容，它必須是文件中的第一個 class="demo-container"

1
2
3
 
<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

結果會像這樣

1
 
<div class="demo-box">Demonstration Box</div>

此方法使用瀏覽器的 innerHTML 屬性。某些瀏覽器可能不會傳回與原始文件中的 HTML 來源完全相同的 HTML。例如，如果 Internet Explorer 的屬性值中僅包含字母數字字元，有時會省略引號。

其他注意事項

  • 根據設計，任何接受 HTML 字串的 jQuery 建構函式或方法（例如 jQuery()、.append()、.after() 等）都可能執行程式碼。這可能是透過注入指令碼標籤或使用執行程式碼的 HTML 屬性（例如 <img onload="">）發生的。請勿使用這些方法插入從不受信任的來源（例如 URL 查詢參數、Cookie 或表單輸入）取得的字串。這麼做可能會產生跨網站指令碼 (XSS) 漏洞。在將內容新增至文件之前，請移除或跳脫任何使用者輸入。

範例

按一下段落，將其從 HTML 轉換為文字。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>html demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 20px;
    color: blue;
    cursor: pointer;
  }
  b {
    text-decoration: underline;
  }
  button {
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>
  <b>Click</b> to change the <span id="tag">html</span>
</p>
<p>
  to a <span id="text">text</span> node.
</p>
<p>
  This <button name="nada">button</button> does nothing.
</p>
 
<script>
$( "p" ).on( "click", function() {
  var htmlString = $( this ).html();
  $( this ).text( htmlString );
});
</script>
 
</body>
</html>

示範

.html( htmlString )傳回：jQuery

說明：設定匹配元素組中每個元素的 HTML 內容。

  • 新增版本：1.0.html( htmlString )

    • htmlString
      類型：htmlString
      設定為每個匹配元素內容的 HTML 字串。

  • 新增版本：1.4.html( function )

    • function
      類型：Function( Integer index, htmlString oldhtml ) => htmlString
      傳回要設定的 HTML 內容的函式。接收集合中元素的索引位置和舊的 HTML 值作為引數。jQuery 會在呼叫函式前清空元素；使用 oldhtml 引數來參照先前的內容。在函式中，this 參照集合中的目前元素。

.html() 方法在 XML 文件中不可用。

當 .html() 用於設定元素的內容時，該元素中的任何內容都會完全被新的內容取代。此外，jQuery 會在用新的內容取代子元素之前移除其他建構，例如資料和事件處理常式。

考慮下列 HTML

1
2
3
 
<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

<div class="demo-container"> 的內容可以這樣設定

1
2
 
$( "div.demo-container" )
  .html( "<p>All new content. <em>You bet!</em></p>" );

那行程式碼會取代 <div class="demo-container"> 內的所有內容

1
2
3
 
<div class="demo-container">
  <p>All new content. <em>You bet!</em></p>
</div>

從 jQuery 1.4 開始，.html() 方法允許透過傳入函式來設定 HTML 內容。

1
2
3
4
 
$( "div.demo-container" ).html(function() {
  var emphasis = "<em>" + $( "p" ).length + " paragraphs!</em>";
  return "<p>All new content for " + emphasis + "</p>";
});

給定一個有六個段落的文件，這個範例會將 <div class="demo-container"> 的 HTML 設定為 <p>All new content for <em>6 paragraphs!</em></p>。

這個方法使用瀏覽器的 innerHTML 屬性。有些瀏覽器可能無法產生與提供的 HTML 來源完全相同的 DOM。例如，Internet Explorer 8 之前的版本會將連結上的所有 href 屬性轉換為絕對 URL，而 Internet Explorer 9 之前的版本無法正確處理沒有新增 相容性層 的 HTML5 元素。

若要設定不包含 HTML 的 <script> 元素的內容，請使用 .text() 方法，而不是 .html()。

注意：在 Internet Explorer 9 及其以下版本中，設定 HTML 元素的文字內容可能會破壞其子元素的文字節點，而這些子元素會因為操作而從文件中移除。如果您保留這些 DOM 元素的參考，並且需要它們保持不變，請使用 .empty().html( string ) 取代 .html(string)，以便在將新字串指派給元素之前，先將元素從文件中移除。

範例

在每個 div 中加入一些 html。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>html demo</title>
  <style>
  .red {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<span>Hello</span>
<div></div>
<div></div>
<div></div>
 
<script>
$( "div" ).html( "<span class='red'>Hello <b>Again</b></span>" );
</script>
 
</body>
</html>

示範

在每個 div 中加入一些 html，然後立即對插入的 html 進行進一步操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>html demo</title>
  <style>
  div {
    color: blue;
    font-size: 18px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
 
<script>
$( "div" ).html( "<b>Wow!</b> Such excitement..." );
$( "div b" )
  .append( document.createTextNode( "!!!" ) )
  .css( "color", "red" );
</script>
 
</body>
</html>

示範