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

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

语法:

$(selector).html();

方法。我们将创建一个带有id的按钮，并设置其值为get。然后我们写一个jQuery脚本，在用户点击 “Get “按钮后，返回第一个匹配元素的HTML内容，作为一个简单的提示信息。

例子：在这个例子中，我们要获得的是 <div>标签，一旦用户点击了将使用警报方法显示的按钮。

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

输出:

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

将HTML元素转换为文本：

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

例子：在这个例子中，我们得到的是div元素的内容。我们有两个div标签，只有第一个匹配的元素的内容会被返回。

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

输出:

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

设置HTML的内容：

语法:

它设置匹配元素的内容。

$(selector).html(content)

它使用一个函数来设置内容。

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

参数：该方法接受上面提到的和下面描述的两个参数。

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

方法。我们正在创建一个带有Value Set的按钮。然后我们写jQuery脚本，设置第一个匹配元素的内容，即第一个Div元素。fisrtDiv的完整代码，即第一个Div元素将被改为 “New HTML Content and GeeksforGeeks”。请注意，我们使用的是 <h1>和 <h2>标签在HTML的更新内容中。

例子：在这个例子中，一旦用户点击了按钮，我们将使用第一种语法来设置div元素的内容。

<!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中html()方法的用途是什么？

方法。我们正在创建一个带有Value Set的按钮。然后我们编写jQuery脚本，使用一个函数设置第一个匹配的元素的内容，即第一个Div元素。fisrtDiv的完整代码，即第一个Div元素将被改为 “旧内容是。通过添加一个索引为0的按钮来设置新的HTML内容，现在已经改变”。该函数有两个参数，即索引值和作为字符串的旧内容。我们正在使用这些值并更新旧的内容，你可以在输出中看到。

例子：在这个例子中，一旦用户点击了按钮Set，我们将设置第一个Div元素的内容。我们只是简单地返回一个信息，同时打印收到的索引值。

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