jquery에서 html() 메소드를 사용하는 방법-JS 튜토리얼-php.cn

jquery에서 html() 메소드를 사용하는 방법

醉折花枝作酒筹

풀어 주다： 2021-06-08 14:33:28

원래의

4983명이 탐색했습니다.

JavaScript에서 "html()" 메서드의 사용법은 "element.html(선택한 요소의 새 콘텐츠)"입니다. html 메소드는 선택된 요소의 컨텐츠를 설정하거나 반환합니다. 이 메소드를 사용하여 컨텐츠를 반환하면 첫 번째 일치하는 요소의 컨텐츠가 반환됩니다. 이 메소드를 사용하여 컨텐츠를 설정하면 일치하는 모든 요소의 컨텐츠가 다시 작성됩니다.

jquery에서 html() 메소드를 사용하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

HTML 콘텐츠는 콘텐츠에 HTML 태그가 포함될 수 있고 브라우저에서 렌더링될 수 있음을 의미합니다.

텍스트 콘텐츠는 먼저 콘텐츠에 미리 정의된 HTML 문자를 html 문자 엔터티로 변환하여 HTML 태그가 렌더링되지 않도록 하는 것입니다.
문법 구조 1:

$(selector).html()

로그인 후 복사

이때 메소드가 매개변수를 사용하지 않으면 첫 번째로 일치하는 요소의 html 콘텐츠를 가져옵니다.

이 메서드는 매개 변수가 없는 text() 메서드와 유사하지만 여전히 큰 차이점이 있습니다.

One.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 Reset content"로 설정합니다.

<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!