當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

JQuery .html()用法及代碼示例


獲取匹配元素集中第一個元素的 HTML 內容或設置每個匹配元素的 HTML 內容。

用法一

.html() => String

說明：獲取匹配元素集中第一個元素的 HTML 內容。

  • 添加的版本：1.0.html()

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

此方法不適用於 XML 文檔。

在 HTML 文檔中，.html() 可用於獲取任何元素的內容。如果選擇器表達式匹配多個元素，則隻有第一個匹配項才會返回其 HTML 內容。考慮這段代碼：

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

為了檢索以下 <div> 的內容，它必須是文檔中第一個帶有 class="demo-container" 的內容：

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

結果將如下所示：

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

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

其他注意事項：

  • 根據設計，任何接受 HTML 字符串的 jQuery 構造函數或方法(jQuery()、.append()、.after() 等)都可能執行代碼。這可以通過注入腳本標簽或使用執行代碼的 HTML 屬性(例如，<img onload="">)來實現。不要使用這些方法插入從 URL 查詢參數、cookie 或表單輸入等不受信任的來源獲得的字符串。這樣做會引入cross-site-scripting (XSS) 漏洞。在向文檔添加內容之前刪除或轉義任何用戶輸入。

例子：

單擊段落可將其從 html 轉換為文本。

<!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.5.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" ).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 索引，htmlString oldhtml)=> htmlString
      返回要設置的 HTML 內容的函數。接收集合中元素的索引位置和舊的 HTML 值作為參數。 jQuery 在調用函數之前清空元素；使用 oldhtml 參數來引用以前的內容。在函數中，this 指的是集合中的當前元素。

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

當.html() 用於設置元素的內容時，該元素中的任何內容都會被新內容完全替換。此外，jQuery 在將這些元素替換為新內容之前，會從子元素中刪除其他結構，例如數據和事件處理程序。

考慮以下 HTML：

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

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

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

該行代碼將替換 <div class="demo-container"> 中的所有內容：

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

從 jQuery 1.4 開始，.html() 方法允許通過傳入一個函數來設置 HTML 內容。

$( "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。例如，版本 8 之前的 Internet Explorer 會將鏈接上的所有 href 屬性轉換為絕對 URL，並且版本 9 之前的 Internet Explorer 在不添加單獨的 compatibility layer 的情況下將無法正確處理 HTML5 元素。

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

注意：在 Internet Explorer 9 及以下版本中，設置 HTML 元素的文本內容可能會損壞其子元素的文本節點，這些子節點會因操作而從文檔中刪除。如果您保留對這些 DOM 元素的引用並且需要它們保持不變，請使用.empty().html( string )代替.html(string)以便在將新字符串分配給元素之前從文檔中刪除元素。

例子：

向每個 div 添加一些 html。

<!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.5.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 進行進一步操作。

<!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.5.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>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .html()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。