jQuery html() 메서드를 사용하는 방법

jQuery에는 개발자가 동적 웹 경험을 효율적으로 생성하는 데 도움이 되는 많은 방법이 있습니다. jQuery html() 메소드는 선택된 요소 내부의 모든 HTML을 대체합니다. 이는 페이지와 상호 작용한 후 사용자에게 표시되는 내용을 동적으로 변경하려는 경우에 유용합니다.

이 가이드에서는 html()을 사용하는 방법에 대해 배울 것입니다. 구문. html()을 사용하는 단계별 접근 방식도 살펴보겠습니다. . jQuery html() jQuery 라이브러리의 기본 메소드이며 자주 사용됩니다. 기본 사항을 학습한 후에는 html() 사용 연습을 시작할 준비가 됩니다. .

jQuery html()이란 무엇입니까?

jQuery html() 일치하는 요소 집합에 있는 각 요소의 HTML 내용을 설정합니다. 원하는 HTML만 대체할 수 있을 만큼 충분히 구체적인 쿼리를 제공하는 데 주의를 기울여야 합니다.

html()로 내용만 변경 . 스타일시트가 있는 경우 새 콘텐츠의 스타일이 이전 콘텐츠와 동일하게 지정됩니다. html() HTML 문서에서만 작동하며 XML에서는 작동하지 않습니다.

html() jQuery 구문

jQuery 메소드는 선택기에서 먼저 호출된다는 것을 기억하십시오. 선택기는

태그만큼 광범위하거나 ID가 있는

만큼 구체적일 수 있습니다(

). 원하는 요소가 선택되면 html()을 호출할 수 있습니다. HTML 문자열을 html()에 매개변수로 전달합니다. . CSS 선택기에 대한 자세한 설명은 가이드를 참조하세요.

html() 문자열 리터럴을 매개변수로 받거나 문자열을 포함하는 변수를 허용합니다. "New Content"의 문자열 리터럴을 전달하면 "New Content"를 참조하는 변수를 전달하는 것과 동일하게 렌더링됩니다.

다음과 같은 간단한

가 있다고 가정해 보겠습니다.

<div class='main-content>
  <p class='paragraphOne'> Hello World </p>
</div>

전체

태그를 교체할 수 있습니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

$('div.main-content').html('<p>New Content</p>')

위의 코드는 새 HTML을 다음과 같이 렌더링합니다.

<div class='main-content>
  <p>New Content </p>
</div>

원래

태그와 연결된 스타일이 있었다면 더 이상 새 콘텐츠와 함께 활성화되지 않습니다. 간단한 문자열도 전달할 수 있습니다.

$('div.main-content').html('New Content')

이제 HTML은 다음과 같습니다.

<div class='main-content>
  New Content 
</div>

새로운 내용에 약간의 차이가 있음을 알 수 있습니다. 문자열 리터럴을 전달하는 것은 이전 콘텐츠의 스타일을 유지하는 좋은 방법입니다. 문자열 리터럴은 단순히 문자를 포함하는 문자열임을 기억하십시오. 새 콘텐츠가 자식 요소여야 하는 경우 HTML 문자열을 사용하면 됩니다.

이제 기본 구문을 다루었으므로 예제를 살펴보겠습니다.

html() jQuery 예제

html() 위의 "새 콘텐츠" 예제에서 선택한 요소 내부의 콘텐츠를 대체합니다. 이것은 문자열 리터럴 또는 HTML 문자열을 매개변수로 전달하여 수행할 수 있습니다. 원래의 스타일을 유지하는 예를 살펴보겠습니다.

<head>
<style>
.blue {
 color: blue;
}

</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<h2>
html() Demo:
</h2>
<div class='main'>
 <p class='blue'>
 Hello
 </p>
 <p>
 World
 </p>
 <p>
 Goodbye
 </p>
 </div>
 <script>
 
 </script>
</body>

시작 HTML 페이지를 보면 "Hello"라는 단어만 파란색으로 스타일이 지정되어 있음을 알 수 있습니다.

이 예에서는 "Hello"라는 단어를 새 콘텐츠로 바꾸지만 원래 스타일은 유지하려고 합니다. 이를 수행하기 위해 클래스 이름이 파란색인 단락을 선택합니다.

 $('p.blue').html("Hello AGAIN")

파란색 클래스에 속하는 단락을 선택하고 "Hello"를 "Hello AGAIN"으로 대체했습니다. html() 이후 요소 이름에 래핑된 콘텐츠를 대체하고 파란색은 유지됩니다.

단락 텍스트를 모두 바꾸려면 어떻게 해야 합니까?

요소를 선택하면 위의 텍스트를 "Hello AGAIN"의 세 가지 인스턴스로 대체합니다.

 $('p').html("Hello AGAIN")

여기에서 HTML 파일의 모든 단락 태그를 선택하고 각 태그의 내용을 "Hello AGAIN"으로 바꿉니다. 첫 번째 예와 마찬가지로 해당 태그에 래핑된 콘텐츠를 교체하기 때문에 원래 스타일이 렌더링됩니다.

우리가 예상했던 대로. 선택기에서 '메인' 클래스에 속한

로 한 단계 올라가 보겠습니다. 여기에서 HTML 문자열을 매개변수로 전달하는 것이 편리합니다.

 $('div.main').html('<p class=blue>Main Div Content</p>')

기본 div 내부에는 세 개의 단락 요소가 있습니다. html() 방법 알기 작동하면 위의 코드가 세 개의

태그를 매개변수로 전달된 태그로 대체할 것이라고 추론할 수 있습니다. 위의 개념에 대해 더 자세히 알아보려면 HTML 학습에 대한 가이드를 읽어보세요.

한 줄의 코드에서 세 개의 다른 단락 요소를 교체하고 원래 클래스 스타일을 사용했습니다.

결론

jQuery html() 동적 환경을 만들기 위해 HTML 페이지의 콘텐츠를 교체하는 데 일반적으로 사용되는 방법입니다. html() 때문에 HTML 요소 내부에 래핑된 콘텐츠를 대체하므로 jQuery 선택기와 모든 스타일 클래스에 주의하는 것이 중요합니다. 이렇게 하면 원치 않는 스타일 변경이 방지됩니다.

우리는 jQuery가 무엇인지, 구문과 사용 방법의 예를 배웠습니다. 시간을 할애하여 이 널리 사용되는 방법을 연습하고 이제 익숙해지십시오.