JavaScript를 사용하여 라벨의 텍스트를 변경하는 방법은 무엇입니까?

HTML 문서에서 라벨 요소의 텍스트를 변경하는 방법을 배우기 전에 먼저 라벨 태그 자체가 무엇인지부터 알아볼까요?

태그는 사용자가 클릭하면 태그 안의 텍스트를 전환할 수 있으므로 마우스 사용자의 웹 페이지 사용성을 향상시키는 데 도움이 됩니다.

이제 JavaScript를 사용하여 라벨 요소의 텍스트를 변경하는 방법을 살펴보겠습니다.

JavaScript를 사용하면 아래와 같이 두 가지 내장 속성을 사용하여 HTML 문서의 모든 요소 텍스트를 변경할 수 있습니다. -

• innerHTML 속성을 사용하세요.

• innerText 속성을 사용하세요.

innerHTML 속성을 사용하세요

innerHTML 속성을 사용하면 일부 HTML을 사용하여 새 텍스트를 변경하거나 할당할 수 있습니다. 즉, 새 텍스트를 제공하는 동안 HTML 태그를 사용할 수 있으며, 다른 HTML 요소를 사용하여 정의하여 중요도에 따라 새 텍스트를 관리할 수 있습니다.

문법

다음 구문은 JavaScript의 innerHTML 속성을 사용하여 레이블 요소에 새 텍스트를 변경하거나 할당하는 데 사용됩니다. -

으아악

JavaScript 코드 예제를 사용하여 레이블 요소 텍스트의 innerHTML 속성을 변경하는 실제 구현을 살펴보겠습니다. -

알고리즘

• 1단계 - 첫 번째 단계에서는 ID가 포함된 태그 요소를 HTML 문서에 추가하여 JavaScript로 가져오고 나중에 innerHTML 속성을 사용하여 텍스트를 변경할 수 있습니다.

• 2단계 - 다음 단계에서는 문서에 입력 요소를 추가하여 사용자로부터 입력 텍스트를 가져오고 레이블 요소의 텍스트를 해당 텍스트로 바꿉니다. p>

• 3단계 - 이 단계에서는 함수를 값으로 사용하고 사용자가 버튼을 클릭할 때 호출하는 onclick 이벤트가 있는 버튼 요소를 추가합니다.

• 4단계 - 네 번째 단계에서는 위 구문과 같이 innerHTML 속성을 사용하여 라벨 태그의 텍스트를 변경하는 JavaScript 사용자 정의 함수를 정의합니다.

• 5단계 - 마지막 단계에서는 마지막 단계에서 정의한 함수를 버튼 레이블과 연관되어 정의된 onclick 이벤트에 할당하여 나중에 버튼을 클릭할 때 호출할 수 있도록 합니다.

예

아래 예에서는 실제로 innerHTML 속성을 사용하여 JavaScript를 사용하여 레이블 요소의 텍스트를 변경하는 방법을 설명합니다. -

으아악

위 예에서는 먼저 문서에 할당된 ID를 사용하여 태그 요소를 가져온 다음 innerHTML 속성을 사용하여 텍스트를 HTML 태그도 포함하는 새 텍스트로 변경합니다.

innerText 속성 사용

innerHTML 속성과 마찬가지로 innerText 속성도 HTML 문서에 있는 모든 HTML 요소의 텍스트를 변경하는 데 사용됩니다. innerHTML 속성과 거의 유사하지만, 유일한 차이점은 내부에 텍스트가 포함된 HTML 요소의 사용을 허용하지 않는다는 것입니다. 텍스트가 포함된 HTML 요소를 사용하려고 하면 해당 요소가 새 텍스트의 일부로 처리되어 사용자 화면에 있는 그대로 표시됩니다.

문법

다음 구문은 innerText 속성을 사용하여 레이블 요소의 텍스트를 변경하는 방법을 보여줍니다. -

으아악

자바스크립트 코드 예시를 통해 자세히 이해하고 실제로 구현해 보겠습니다.

알고리즘

이전 예시와 이번 예시의 알고리즘은 거의 비슷합니다. 텍스트를 변경하려면 위 예에서 innerHTML 속성을 innerText 속성으로 바꾸는 등 몇 가지 작은 변경만 하면 됩니다.

예

아래 예에서는 innerText 속성을 사용하여 JavaScript에서 레이블 요소의 텍스트를 변경하는 방법을 보여줍니다. -

으아악

이 예에서는 JavaScript를 사용하여 innerHTML 속성을 사용하는 것과 동일한 방식으로 innerText 속성을 사용하여 라벨 요소의 텍스트를 변경합니다.

이 기사에서는 HTML 문서에서 태그 요소의 텍스트를 변경하는 두 가지 방법과 코드 예제에서 실제 구현을 살펴보았습니다. 이전 버전에서는 HTML 요소를 사용하여 큰따옴표 안에 텍스트를 제공할 수 있는 innerHTML 속성을 사용하여 텍스트를 변경했습니다. 그러나 후자에서는 이를 허용하지 않는 innerText 속성을 사용했습니다.

위 내용은 JavaScript를 사용하여 라벨의 텍스트를 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!