jQuery를 사용하여 innerHTML 업데이트

오늘 포스트에서는 jQuery에서 요소의 내부 HTML을 업데이트하거나 교체하는 방법에 대해 알아보겠습니다.

jQuery를 사용하여 innerHTML 업데이트

jQuery는 일치하는 요소 집합에서 각 요소의 HTML 내용을 설정하는 .html() 메서드를 제공합니다.

통사론:

.html(htmlString).html(function)

1. htmlString은 일치하는 각 요소의 내용으로 설정된 HTML 문자열입니다.
2. HTML 콘텐츠 자료를 집합으로 반환하는 function입니다. 세트에 있는 요소의 이전 HTML 값과 인덱스는 인수로 간주됩니다.

함수를 호출하기 전에 jQuery는 요소를 비웁니다. 그런 다음 이전 HTML 인수를 사용하여 이전 콘텐츠를 참조합니다. this는 함수 내부 집합 내의 현재 요소를 참조할 수 있습니다.

.html()을 사용하여 요소의 내용을 설정하면 해당 요소의 모든 내용이 새 내용으로 완전히 대체됩니다. 또한 jQuery는 정보 및 이벤트 핸들러와 같은 다른 구성 요소를 새로운 콘텐츠로 교체하기 전에 자식 요소에서 제거합니다.

이 방법에서는 브라우저의 innerHTML 속성을 사용합니다.

일부 브라우저는 제공된 HTML 소스를 정확히 복제하는 DOM을 생성하지 않을 수 있습니다. .text() 메서드를 사용하여 .html() 메서드 대신 HTML을 포함하지 않는 script 요소의 내용을 설정합니다.

다음 예를 통해 이해해 봅시다.

HTML 코드:

<div class="txt-container">Hello World! Welcome to the DelftStack.</div>
<button type="button">Change the text</button>

자바스크립트 코드:

$('button').click(() => {
  $('div.txt-container')
      .html('<p>Thank you for visiting <em>DelftStack!</em></p>');
})

위의 예에서 Hello World! Welcome to the DelftStack. 메시지. Change the text 버튼을 클릭하면 새 단락 태그로 DOM이 업데이트됩니다.

jQuery를 지원하는 모든 브라우저에서 위의 코드 조각을 실행해 보십시오. 다음 결과를 표시할 것입니다.

텍스트 변경 전 출력:

텍스트 변경 후 출력:

데모 실행