How to use the html() method in jquery-JS Tutorial-php.cn

How to use the html() method in jquery

醉折花枝作酒筹

Release： 2021-06-08 14:33:28

Original

4981 people have browsed it

In JavaScript, the usage of the "html()" method is "element.html (new content of the selected element)". The html method sets or returns the content of the selected element. When this method is used to return content, the content of the first matching element is returned; when this method is used to set content, the content of all matching elements is rewritten.

How to use the html() method in jquery

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

HTML content means that the content can contain HTML tags and can be rendered by the browser.

The text content is to first convert the HTML predefined characters in the content into html character entities, so that the HTML tags will not be rendered.
Syntax structure one:

$(selector).html()

Copy after login

At this time, when the method does not take parameters, it obtains the html content of the first matching element.

This method is similar to the text() method without parameters, but there are still big differences:

1.html() method obtains the content of the first matching element, while text() The method is to obtain the content contained in all matching elements.
2. The html() method obtains the content html content, while the text() method obtains the text content.

Example code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=" utf-8" />
    <meta name="author" content="https://www.jb51.net/" />
    <title></title>
    <style type="text/css">
      div{
        height:150px;
        width:150px;
        background-color:green;
        margin-top:10px;
      }
    </style>
    <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("button").click(function () {
          alert($("div").html());
        });
      });
    </script>
  </head>

  <body>
    <div>
      <ul>   
        <li>
          <span>欢迎您</span>
        </li>         
      </ul>
    </div>
    <button>点击查看效果</button>
  </body>
</html>

Copy after login

The above code will return the content in the div element.

Grammar structure 2:

$(selector).html(content)

Copy after login

With parameters, it sets the html content of all matching elements.
This method is similar to the text() method with parameters, but there is still a big difference:
The html() method sets the html content, while the text() method sets the text content.

Example code:

The following code sets the html content in the div to "I am the content after reset".

<!DOCTYPE html>
<html>
  <head>
    <meta charset=" utf-8" />
    <meta name="author" content="https://www.jb51.net/" />
    <title>脚本之家</title>
    <style type="text/css">
      div
      {
        height:150px;
        width:150px;
        background-color:green;
        margin-top:10px;
      }
    </style>
    <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("button").click(function () {
          $("div").html("<b>我是重新设置后的内容</b>");
        });
      });
    </script>
  </head>
  
  <body>
    <div>原来内容</div>
    <button>点击查看效果</button>
  </body>
</html>

Copy after login

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to use the html() method in jquery. For more information, please follow other related articles on the PHP Chinese website!