jQuery 中 html() 方法的用途是什么？

jQuery 中的 html() 方法用于获取匹配元素集中第一个元素的内容，或者用于设置每个匹配元素的 HTML 内容。它返回第一个匹配元素的内容。此函数不接受任何参数。

句法：

$(selector).html();

方法：我们将创建一个带有 id 的按钮并将其值设置为 get。然后我们编写 jQuery 脚本作为警报一条简单的消息，一旦用户单击“获取”按钮，它就会返回第一个匹配元素的 HTML 内容。

示例：在此示例中，一旦用户单击将使用 alert 方法显示的按钮，我们将获取

标记的内容。

HTML

  

    
    
      
    
        $(document).ready(function () {
            $("button").click(function () {
                alert($("div").html());
            });
        });
    

  

    
          
Get html content from html element
  
    
    Get

  

输出：

将 HTML 元素转换为文本：

方法：我们正在创建一个值为 Get 的按钮。然后我们编写 jQuery 脚本，将 HTML 的内容（即 firstDiv 元素）转换为字符串并显示在段落元素中。在这个例子中，我们得到了第一个 Div 元素的完整 HTML 内容。

示例：在此示例中，我们正在获取 div 元素的内容。我们有两个 div 标签，只返回第一个匹配元素的内容。

HTML

  

    
    
      
    
        $(document).ready(function () {
            $("button").click(function () {
                var str = $("div.firstDiv").html();
                $("p").text(str);
            });
        });
    

  

    
        
              
Get html content from html element
  
        
    
    Get

  

输出：

设置 HTML 的内容：

句法：

它设置匹配元素的内容。

$(selector).html(content)

它使用函数设置内容。

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

参数：此方法接受上面提到的两个参数，如下所述：

• content：它是一个强制参数，指定所选元素的新内容。
• 函数(index, currentcontent)：它是一个可选参数，指定返回所选元素的新内容的函数。
  • index：用于返回集合中元素的索引位置。
  • currentcontent：用于返回被选元素的当前 HTML 内容。

方法：我们正在创建一个带有值集的按钮。然后我们编写 jQuery 脚本来设置第一个匹配元素的内容，即第一个 Div 元素。 fisrtDiv 的完整代码，即第一个 Div 元素将更改为“New HTML Content and GeeksforGeeks”。请注意，我们在 HTML 的更新内容中使用了

和

标记。

示例：在此示例中，一旦用户使用第一种语法单击按钮 Set，我们将设置 div 元素的内容。

HTML

  

    
    
  
    
        $(document).ready(function () {
            $("button").click(function () {
                $("div").html(
"<h1>New HTML Content</h1> <h2>GeeksforGeeks</h2>");
            });
        });
    

  

    
        
              
Set new html content by adding a button
  
        
    
    Set

  

输出：

方法：我们正在创建一个带有值集的按钮。然后我们编写 jQuery 脚本来设置第一个匹配元素的内容，即第一个使用函数的 Div 元素。 fisrtDiv的完整代码，即第一个Div元素将更改为“Old content is: Set new HTML content by add a button with index 0 is now changed”。该函数有两个参数，即索引值和作为字符串的旧内容。正如您在输出中看到的那样，我们正在使用这些值并更新旧内容。

示例：在此示例中，一旦用户单击按钮 Set，我们将设置第一个 Div 元素的内容。我们只是返回一条消息并打印接收到的索引值。

HTML

  

    
    
  
    
        .firstDiv {
            width: 400px;
            border-color: blue;
            border-width: 0.2em;
            border-style: double;
        }
    
  
    
        $(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>"
                    );
                });
            });
        });
    

  

    
        
            
                Set new html content 
                by adding a button
            
        
    
    
    Set

  

输出：