Heim > Web-Frontend > js-Tutorial > So verwenden Sie die Methode html() in jquery

So verwenden Sie die Methode html() in jquery

醉折花枝作酒筹
Freigeben: 2021-06-08 14:33:28
Original
5043 Leute haben es durchsucht

In JavaScript lautet die Verwendung der Methode „html()“ „element.html (neuer Inhalt des ausgewählten Elements)“. Die HTML-Methode legt den Inhalt des ausgewählten Elements fest oder gibt ihn zurück. Wenn diese Methode zum Zurückgeben von Inhalten verwendet wird, wird der Inhalt des ersten übereinstimmenden Elements zurückgegeben. Wenn diese Methode zum Festlegen von Inhalten verwendet wird, wird der Inhalt aller übereinstimmenden Elemente neu geschrieben.

So verwenden Sie die Methode html() in jquery

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

HTML-Inhalt bedeutet, dass der Inhalt HTML-Tags enthalten und vom Browser gerendert werden kann.

Der Textinhalt besteht darin, zunächst die vordefinierten HTML-Zeichen im Inhalt in HTML-Zeicheneinheiten umzuwandeln, sodass die HTML-Tags nicht gerendert werden.
Grammatikstruktur 1:

$(selector).html()
Nach dem Login kopieren

Wenn die Methode zu diesem Zeitpunkt keine Parameter annimmt, erhält sie den HTML-Inhalt des ersten übereinstimmenden Elements.

Diese Methode ähnelt der text()-Methode ohne Parameter, es gibt jedoch immer noch einen großen Unterschied:

Die One.html()-Methode ruft den Inhalt des ersten passenden Elements ab, während die text()-Methode den darin enthaltenen Inhalt erhält in allen passenden Elementen Inhalt.
2. Die Methode html() ruft den HTML-Inhalt ab, während die Methode text() den Textinhalt abruft.

Beispielcode:

<!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>
Nach dem Login kopieren

Der obige Code gibt den Inhalt im div-Element zurück.

Grammatikstruktur 2:

$(selector).html(content)
Nach dem Login kopieren

Mit Parametern wird der HTML-Inhalt aller übereinstimmenden Elemente festgelegt.
Diese Methode ähnelt der text()-Methode mit Parametern, es gibt jedoch immer noch einen großen Unterschied:
html()-Methode legt den HTML-Inhalt fest, während die text()-Methode den Textinhalt festlegt.

Beispielcode:

Der folgende Code setzt den HTML-Inhalt im div auf „Ich bin der zurückgesetzte Inhalt“.

<!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>
Nach dem Login kopieren

【Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Methode html() in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage