jQuery를 사용하여 요소의 HTML을 수정하고 읽는 방법

내부 HTML은 요소의 HTML 콘텐츠에 액세스하고 수정하는 데 사용되는 속성입니다. 지난 몇 년 동안 jQuery는 JS에서 내부 템플릿을 구현하는 데 가장 널리 사용되는 도구 중 하나가 되었습니다. 이 기사에서는 jQuery를 사용하여 요소의 HTML을 수정하고 읽는 방법을 다룹니다.

jQuery 내부 템플릿(Inner HTML) 구문

개념적으로 내부 템플릿(Inner HTML)은 DOM(Document Object Model)의 연산을 포함합니다. DOM을 수정하여 요소에 대해 작동합니다. 다음은 HTML 수정을 위한 기본 jQuery 구문입니다.

$(selector).html(content)

위 구문에서 선택기는 수정해야 할 요소를 가리킵니다. HTML의 내용은 content 변수로 표시됩니다. 콘텐츠는 간단한 텍스트나 HTML 코드일 수 있습니다. 전달된 콘텐츠가 함수인 경우 함수의 반환 값은 HTML 콘텐츠가 됩니다.

예제를 통해 jQuery의 내부 템플릿(Inner HTML)의 사용법을 살펴보겠습니다.

예 1:

다음 예에서는 "content"라고 표시된 요소를 선택하고 새 HTML 콘텐츠를 "

Welcome to My Website!

"로 설정합니다.

$ ("# content").html("

내 웹사이트에 오신 것을 환영합니다!

");

예제 2:

다음 예에서는 JavaScript 함수를 사용하여 콘텐츠 HTML로 표시된 콘텐츠를 동적으로 계산합니다. content:

$("#content").html(function(){
return "오늘 날짜: " + Date();
});

요소 내용 읽기(내부 HTML)

제외 요소의 내용을 설정하거나 jQuery를 사용하여 요소의 내용(내부 HTML)을 읽을 수 있습니다. 다음은 요소의 HTML 콘텐츠를 읽기 위한 기본 jQuery 구문입니다.

$(selector).html()

이 구문에서 선택기는 읽어야 하는 요소를 가리킵니다. 반환 값은 요소의 HTML 콘텐츠가 됩니다. 다음으로 예를 살펴보겠습니다.

예 3:

다음 예에서는 "list"로 표시된 모든 목록 항목을 반복하고 각 항목의 HTML을 콘솔에 출력합니다.

$("#list li").each(function( ) {
console.log($(this).html());
});

Summary

이 글을 통해 우리는 jQuery의 내부 HTML 태그를 사용하여 요소 HTML 콘텐츠를 읽고 수정하는 방법을 배웠습니다. 또한 함수를 사용하여 요소 내용을 동적으로 계산하는 방법도 살펴보았습니다. 이 기사가 jQuery의 내부 템플릿을 더 잘 이해하고 이를 사용하여 HTML을 처리하는 방법을 배우는 데 도움이 되기를 바랍니다.

위 내용은 jQuery를 사용하여 요소의 HTML을 수정하고 읽는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!