Comment utiliser la méthode html() dans jquery-js tutoriel-php.cn

Comment utiliser la méthode html() dans jquery

醉折花枝作酒筹

Libérer： 2021-06-08 14:33:28

original

5045 Les gens l'ont consulté

En JavaScript, l'utilisation de la méthode "html()" est "element.html (nouveau contenu de l'élément sélectionné)". La méthode HTML définit ou renvoie le contenu de l'élément sélectionné. Lorsque cette méthode est utilisée pour renvoyer du contenu, le contenu du premier élément correspondant est renvoyé ; lorsque cette méthode est utilisée pour définir le contenu, le contenu de tous les éléments correspondants est réécrit.

Comment utiliser la méthode html() dans jquery

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Le contenu HTML signifie que le contenu peut contenir des balises HTML et peut être restitué par le navigateur.

Le contenu du texte doit d'abord convertir les caractères HTML prédéfinis dans le contenu en entités de caractères html, afin que les balises HTML ne soient pas rendues.
Structure grammaticale 1 :

$(selector).html()

Copier après la connexion

A ce moment, lorsque la méthode ne prend pas de paramètres, elle obtient le contenu html du premier élément correspondant.

Cette méthode est similaire à la méthode text() sans paramètres, mais il existe encore de grandes différences :

La méthode 1.html() obtient le contenu du premier élément correspondant, tandis que text( ) La méthode consiste à obtenir le contenu contenu dans tous les éléments correspondants.
2. La méthode html() obtient le contenu html, tandis que la méthode text() obtient le contenu texte.

Exemple de 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>

Copier après la connexion

Le code ci-dessus renverra le contenu de l'élément div.

Structure grammaticale 2 :

$(selector).html(content)

Copier après la connexion

Lorsqu'elle a des paramètres, elle définit le contenu html de tous les éléments correspondants.
Cette méthode est similaire à la méthode text() avec des paramètres, mais il y a quand même une grande différence :
La méthode html() définit le contenu html, tandis que la méthode text() définit le contenu du texte.

Exemple de code :

Le code suivant définit le contenu HTML du div sur "Je suis le contenu réinitialisé".

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

Copier après la connexion

[Apprentissage recommandé : Tutoriel avancé javascript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!