jQuery html()用法及代碼示例

jQuery 中的html() method 用於獲取匹配元素集合中第一個元素的內容，或者用於設置每個匹配元素的 HTML 內容。它返回第一個匹配元素的內容。該函數不接受任何參數。

用法:

$(selector).html();

方法：我們將創建一個帶有 id 的按鈕並將其值設置為 get。然後，我們編寫 jQuery 腳本來警告一條簡單的消息，一旦用戶單擊 “Get” 按鈕，該消息就會返回第一個匹配元素的 HTML 內容。

例子：在此示例中，我們獲取的內容Div一旦用戶單擊將使用警報方法顯示的按鈕。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="text/javascript" src= 
"https://code.jquery.com/jquery-1.12.0.min.js"> 
    </script> 
      
    <script> 
        $(document).ready(function () { 
            $("button").click(function () { 
                alert($("div").html()); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <div> 
          
<p>Get html content from html element</p> 
  
    </div> 
    <button id="get">Get</button> 
</body> 
  
</html>

輸出：

將 HTML 元素轉換為文本：

方法：我們正在創建一個值為 Get 的按鈕。然後我們編寫 jQuery 腳本，將 HTML 的內容(即第一個 Div 元素)轉換為字符串並將其顯示在段落元素中。在此示例中，我們獲取了第一個 Div 元素的完整 HTML 內容。

例子：在此示例中，我們獲取 div 元素的內容。我們有兩個 div 標簽，並且隻返回第一個匹配元素的內容。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="text/javascript" src= 
"https://code.jquery.com/jquery-1.12.0.min.js"> 
    </script> 
      
    <script> 
        $(document).ready(function () { 
            $("button").click(function () { 
                var str = $("div.firstDiv").html(); 
                $("p").text(str); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <div class="firstDiv"> 
        <div class="secondDiv"> 
              
<p>Get html content from html element</p> 
  
        </div> 
    </div> 
    <button id="get">Get</button> 
</body> 
  
</html>

輸出：

設置HTML內容：

用法:

它設置匹配元素的內容。

$(selector).html(content)

它使用函數設置內容。

$(selector).html(function(index, currentcontent))

參數：該方法接受如上所述和如下所述的兩個參數：

content:它是一個強製參數，指定所選元素的新內容。
function(index, currentcontent):它是一個可選參數，指定返回所選元素的新內容的函數。
- index:它用於返回集合中元素的索引位置。
- currentcontent:它用於返回所選元素的當前 HTML 內容。

方法：我們正在創建一個帶有值集的按鈕。然後我們編寫 jQuery 腳本來設置第一個匹配元素(即第一個 Div 元素)的內容。 fisrtDiv 的完整代碼，即第一個 Div 元素將更改為“New HTML Content and GeeksforGeeks”。請注意，我們在 HTML 的更新內容中使用了 <h1> 和 <h2> 標記。

例子：在此示例中，一旦用戶單擊“設置”按鈕，我們就會使用第一種語法設置 div 元素的內容。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="text/javascript" src= 
"https://code.jquery.com/jquery-1.12.0.min.js"> 
    </script> 
  
    <script> 
        $(document).ready(function () { 
            $("button").click(function () { 
                $("div").html( 
"<h1>New HTML Content</h1> <h2>GeeksforGeeks</h2>"); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <div class="firstDiv"> 
        <div class="secondDiv"> 
              
<p>Set new html content by adding a button</p> 
  
        </div> 
    </div> 
    <button>Set</button> 
</body> 
  
</html>

輸出：

方法：我們正在創建一個帶有值集的按鈕。然後我們編寫 jQuery 腳本，使用函數設置第一個匹配元素(即第一個 Div 元素)的內容。 fisrtDiv 的完整代碼，即第一個 Div 元素將更改為“舊內容是：通過添加索引 0 的按鈕來設置新的 HTML 內容現在已更改”。該函數有兩個參數，即索引值和字符串形式的舊內容。我們正在使用這些值並更新舊內容，如您在輸出中看到的那樣。

例子：在此示例中，一旦用戶單擊“Set”按鈕，我們就會設置第一個 Div 元素的內容。我們隻是返回一條消息並打印收到的索引值。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="text/javascript" src= 
"https://code.jquery.com/jquery-1.12.0.min.js"> 
    </script> 
  
    <style> 
        .firstDiv { 
            width: 400px; 
            border-color: blue; 
            border-width: 0.2em; 
            border-style: double; 
        } 
    </style> 
  
    <script> 
        $(document).ready(function () { 
            $("button").click(function () { 
                $("div").html(function (i, str) { 
                    return ( 
                        "<h2>Old content is:</h2>" + 
                        str + 
                        "<h2>with index</h2>" + 
                        i + 
                        "<h2>is now changed</h2>" 
                    ); 
                }); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <div class="firstDiv"> 
        <div class="secondDiv"> 
            <h2> 
                Set new html content  
                by adding a button 
            </h2> 
        </div> 
    </div> 
    <br /> 
    <button>Set</button> 
</body> 
  
</html>

輸出：

相關用法

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