jquery中html()方法怎麼用-js教程-PHP中文網

jquery中html()方法怎麼用

醉折花枝作酒筹

發布： 2021-06-08 14:33:28

原創

4983 人瀏覽過

在javascript中，「html()」方法的用法是「元素.html(被選元素的新內容)」。 html方法設定或傳回被選取元素的內容，當此方法用於傳回內容時，則傳回第一個符合元素的內容；當此方法用於設定內容時，則會重寫所有符合元素的內容。

jquery中html()方法怎麼用

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

HTML內容就是內容中可以包含HTML標籤，並且能夠被瀏覽器渲染。

文字內容是先將內容中的HTML預定義字元轉換成html字元實體，這樣HTML標籤就不會被渲染。
語法結構一:

$(selector).html()

登入後複製

此時方法不帶參數時候是取得第一個符合元素的html內容。

此方法與text()方法沒有參數用法類似，但是還是有很大差別：

一.html()方法取得第一個符合元素的內容，而text()方法是取得所有符合元素所包含的內容。
二.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元素中的內容。

語法結構二:

$(selector).html(content)

登入後複製

有參數的時候是設定所有符合元素而的html內容。
此方法與text()方法帶有參數的用法類似，但是還是有很大的區別：
html()方法設定的是html內容，而text()方法設定的是文字內容。

實例程式碼:

以下程式碼將div中的html內容設定為"我是重新設定後的內容"。

<!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中文網其他相關文章！