JavaScript innerHTML 및 innerText:가이드

귀하의 사이트를 보다 인터랙티브하게 만들기 위해 페이지에 표시되는 텍스트 또는 HTML을 변경하는 방법을 알아야 합니다. innerText 및 innerHTML HTML 속성이 들어옵니다.

이러한 속성을 사용하면 DOM 요소의 텍스트와 HTML 코드를 쉽게 변경할 수 있습니다. 이 가이드에서는 JavaScript innerText 사용 방법을 배웁니다. 및 innerHTML 속성.

자바스크립트 innerHTML이란 무엇입니까?

JavaScript innerHTML 속성은 웹 페이지에 있는 요소의 HTML 내용을 설정합니다. InnerHTML은 HTML DOM의 속성입니다. innerHTML은 종종

요소의 내용을 설정하고 수정하는 데 사용됩니다.

다음과 같이 innerHTML을 사용할 수 있습니다.

document.getElementById("paragraph").innerHTML ="직업 카르마!";

이 코드 줄은 "paragraph"

요소의 내용을 "Career Karma!"로 설정합니다. getElementById() 메소드는 ID로 요소를 검색합니다.

브라우저는 페이지가 로드될 때 DOM(문서 개체 모델)을 정의합니다. 이 DOM은 페이지에 표시되는 일련의 개체입니다.

DOM은 웹 요소를 변경할 때마다 HTML 코드를 변경할 필요가 없다는 것을 의미합니다. DOM 및 JavaScript를 사용하여 특정 세션에서 페이지가 표시되는 방식을 변경할 수 있습니다.

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

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

자바스크립트 innerText란 무엇입니까?

JavaScript innerText 속성은 요소의 텍스트 내용을 설정합니다. 또한 하위 항목의 내용을 설정합니다. 하위 항목은 단락 안에 태그를 포함할 수 있습니다.

innerText의 구문은 innerHTML의 구문과 유사합니다.

document.getElementById("element").innerText ="테스트입니다.";

이것은 id가 "element"인 요소의 텍스트 값을 "This is test"로 설정합니다.

JavaScript 콘솔로 이동하여 변경할 요소를 선택하여 이러한 방법을 테스트할 수 있습니다.

이것은 웹 페이지의 첫 번째

HTML 태그의 내용을 변경합니다. 텍스트를 바꾸려면 innerText를 사용할 수 있습니다. 속성:

이렇게 하면 페이지의 두 번째 단락(숫자 1로 표시됨)의 내용이 "이것은 테스트입니다"로 변경됩니다.

자바스크립트에서 innerHTML 및 innerText 사용

웹 페이지에서 텍스트를 변경하여 시작하겠습니다. 우리는 간단한 플래시 카드 웹 페이지를 만들 것입니다. 이 웹 페이지에는 HTML에 대한 질문이 표시됩니다. 클릭하면 HTML에 대한 질문에 대한 답변이 표시되는 버튼이 있습니다.

웹 페이지 만들기

첫 번째 단계는 프런트 엔드용 index.html 파일을 만드는 것입니다.

<!DOCTYPE html>
<html>
    <head>
   	 <title>HTML Flashcard App</title>
	<link rel="stylesheet" href="./styles.css" />
    </head>
    <body>
   	 <div class="flashcard">
   		 <h2>Does a hyperlink only apply to text?</h2>
   		 <p>The answer will be revealed when you press "Show answer"</p>
   		 <button id="showAnswer">Show answer</button>
		 <br /> <br />
		 <div id="showMessage"></div>
   	 </div>
	<script src="./scripts.js"></script>
    </body>
</html>

이 페이지는 세 가지 구성 요소가 있는 컨테이너를 만듭니다. 먼저 사용자에게 묻는 질문이 있습니다. 답을 공개하는 방법에 대한 메시지가 있습니다. 페이지는 답변을 표시하는 버튼으로 끝납니다.

코드는 요소의 텍스트 콘텐츠를 반환합니다.

페이지를 더 예쁘게 만들기 위해 styles.css 파일에 일부 CSS 스타일을 적용할 것입니다.

<style>
.flashcard {
    margin: auto;
    width: 50%;
    padding: 50px;
    margin-top: 10%;
    background-color: lightgreen;
    text-align: center;
}

button {
    border: none;
    background-color: hotpink;
    padding: 10px;
    border-radius: 10px;
}
</style>

이제 웹 페이지를 살펴보겠습니다.

우리 사이트는 플래시 카드처럼 보이는 것을 보여줍니다. 버튼의 스타일을 지정했습니다.

자바스크립트 innerHTML 및 innerText를 사용하여 텍스트 변경

버튼을 클릭할 때 질문에 대한 답변이 표시되기를 원합니다. 먼저 JavaScript 코드에서 사용할 텍스트와 버튼 요소를 선택합니다. 이 모든 코드는 scripts.js 파일에 작성합니다.

var answerText = document.querySelector('p');
var button = document.querySelector('button');

다음으로 JavaScript 함수를 만들 것입니다. 이 기능은 버튼을 클릭했을 때 우리의 질문에 대한 답을 보여줍니다:

function showAnswer() {
	answerText.innerText = "No. Hyperlinks can be used on both text and images.";
}

버튼을 누를 때 기능을 활성화하기 위해 간단한 이벤트 리스너를 만들 것입니다. 이 리스너는 버튼 클릭을 수신합니다.

button.addEventListener('click', showAnswer);

플래시 카드 앱 설정을 완료했습니다. 웹 페이지를 보고 "답변 표시" 버튼을 클릭하면 단락의 텍스트가 답변을 표시하도록 변경됩니다.

JavaScript innerHTML을 사용하여 이 앱에 더 많은 기능을 추가할 수 있습니다. . 버튼을 클릭하면 플래시 카드 하단에 메시지가 표시되기를 원한다고 가정합니다. 이 메시지는 빨간색으로 표시되어야 합니다. 다음 코드를 사용하여 이 메시지를 만들 수 있습니다.

var message = document.querySelector('#showMessage');

function showAnswer() {
	answerText.innerText = "No. Hyperlinks can be used on both text and images.";
	message.innerHTML = "<span style='color:red;'>You have revealed the answer.</span>";
}

수정된 showAnswer()로 코드를 실행해 보겠습니다. 함수와 우리가 작성한 새로운 쿼리 선택기:

innerHTML을 사용했습니다. HTML 태그를 사이트에 추가하는 방법입니다. 이 태그는 사용자가 답변 보기 버튼을 눌렀을 때 빨간색으로 표시되는 메시지를 표시합니다.

자바스크립트 innerText 대 innerHTML

innerText 및 innerHTML 속성을 사용하면 태그의 내용에 액세스하고 변경할 수 있습니다. innerText는 하위 항목이나 공백 없이 텍스트를 반환합니다. innerHTML은 모든 하위 항목과 공백을 포함한 텍스트를 반환합니다.

요소의 내용을 일반 텍스트로 보려면 innerText를 사용합니다. 문자열에 나타나는 모든 HTML 태그를 보려면 innerHTML을 사용하는 것이 더 적절합니다.

요약하면 innerText를 사용하면 일반 텍스트로 작업할 수 있는 반면 innerHTML을 사용하면 문자열의 HTML로 작업할 수 있습니다.

innerText와 innerHTML 모두 최신 브라우저에서 폭넓게 지원됩니다.

결론

내부텍스트 및 innerHTML 속성은 HTML DOM을 조작합니다. innerText는 공백이나 하위 항목 없이 요소의 텍스트 내용을 반환합니다. innerHTML은 요소의 내용과 공백 및 하위 항목을 반환합니다.

보너스 챌린지로 버튼을 두 번째 클릭할 때 위의 코드에서 답변을 숨길 수 있는지 확인하십시오. 코드는 다음과 같아야 합니다.

사용자가 버튼을 클릭할 때 답변 숨기기
답이 표시될 때 버튼의 텍스트를 '답변 표시'에서 '답변 숨기기'로 변경합니다.
사용자가 '답변 숨기기'를 누른 후에도 '답변을 공개했습니다' 메시지를 유지합니다.

JavaScript를 배우는 데 도움이 되는 더 많은 자습서를 찾고 있다면 JavaScript 초보자를 위한 최고의 자습서를 확인하십시오.