jqueryでhtml()メソッドを使用する方法-jsチュートリアル-php.cn

jqueryでhtml()メソッドを使用する方法

醉折花枝作酒筹

リリース： 2021-06-08 14:33:28

オリジナル

5045 人が閲覧しました

JavaScript では、「html()」メソッドの使用法は「element.html (選択された要素の新しいコンテンツ)」です。 html メソッドは、選択された要素のコンテンツを設定または返します。このメソッドを使用してコンテンツを返すと、最初に一致した要素のコンテンツが返されます。このメソッドを使用してコンテンツを設定すると、一致するすべての要素のコンテンツが書き換えられます。

jqueryでhtml()メソッドを使用する方法

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

HTML コンテンツとは、コンテンツに HTML タグを含めることができ、ブラウザーで表示できることを意味します。

テキストコンテンツは、HTML タグが表示されないように、まずコンテンツ内の HTML 定義済み文字を HTML 文字エンティティに変換します。
構文構造 1:

$(selector).html()

ログイン後にコピー

このとき、メソッドがパラメーターを受け取らない場合は、最初に一致した要素の HTML コンテンツを取得します。

このメソッドはパラメータのない text() メソッドに似ていますが、大きな違いがあります。

1.html() メソッドは最初に一致した要素のコンテンツを取得しますが、text( ) メソッドは、一致するすべての要素に含まれるコンテンツを取得することです。
2. html() メソッドはコンテンツ HTML コンテンツを取得し、text() メソッドはテキストコンテンツを取得します。

コード例:

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

ログイン後にコピー

上記のコードは、div 要素のコンテンツを返します。

文法構造 2:

$(selector).html(content)

ログイン後にコピー

パラメータを使用して、一致するすべての要素の HTML コンテンツを設定します。
このメソッドはパラメータを備えた text() メソッドに似ていますが、大きな違いがあります。
html() メソッドは HTML コンテンツを設定し、text() メソッドはテキストコンテンツを設定します。

コード例:

次のコードは、div 内の HTML コンテンツを「I am the content after restart」に設定します。

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

ログイン後にコピー

[推奨学習: JavaScript 上級チュートリアル]

以上がjqueryでhtml()メソッドを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。