innerText 및 innerHTML_javascript 기술에 대한 일부 문제 분석

innerText 속성은 시작 태그와 종료 태그 사이의 텍스트를 수정하는 데 사용됩니다. 예를 들어 빈

요소가 있고 이를

div의 새 텍스트

로 바꾸고 싶다고 가정해 보겠습니다. DOM으로 구현할 때는 다음과 같이 하세요.
oDiv.appendChild(document.createTextNode("New text for the div."));
이 코드는 읽기 어렵지 않지만 매우 장황합니다. innerText를 사용하는 경우 다음과 같이 하세요.
oDiv.innerText = "New text for the div."
innerText를 사용하면 코드가 더 간결해지고 이해하기 쉬워집니다. 또한 innerText는 미만 기호, 초과 기호, 따옴표 및 & 기호를 자동으로 HTML로 인코딩하므로 특수 문자에 대해 주의할 필요가 없습니다.
oDiv.innerText = ".";

이 코드 줄의 실행 결과는

의 새 텍스트

입니다. 하지만 요소에 HTML 태그를 어떻게 포함해야 할까요? 이것이 innerHTML이 해결하려는 문제입니다.

innerHTML 기능을 사용하면 요소 생성을 위한 DOM 메소드 사용을 고려하지 않고 HTML 문자열을 요소에 직접 할당할 수 있습니다. 예를 들어, 빈
이

HelloWorld가 된다고 가정해 보겠습니다. DOM을 사용하려면 다음 코드를 사용하세요.

var oStrong = document.createElement("strong');
oStrong.appendChild(document.createTextNode("hello"));
var oEm = document.createElement ("em");
oEm.appendChild(document.createTextNode("World"))
oDiv.appendChild(oStrong)
oDiv.appendChild(document.createTextNode("")); 🎜>oDiv.appendChild(oEm);
innerHTML을 사용하면 코드는 다음과 같습니다.
oDiv.innerHTML = "
Hello
World" 코드 한 번에 한 줄씩 표시됩니다. innerText와 innerHTML을 사용하여 요소에 텍스트만 포함된 경우 innerText와 innerHTML은 동일한 값을 반환합니다. 여기에는 텍스트와 innerHTML이 모두 포함됩니다. 다른 요소의 경우 innerText는 텍스트 표현만 반환하는 반면 innerHTML은 모든 요소와 텍스트의 HTML 코드를 반환합니다. 아래 표에는 innerText와 innerHTML이 반환하는 다양한 값이 나열되어 있습니다. 특정 코드.

코드

innerText

innerHTML

안녕하세요

"안녕하세요"

"안녕하세요"

안녕하세요세상

代码	innerText	innerHTML
Hello world	"Hello world"	"Hello world"
Helloworld	"Hello world"	"Helloworld"
	""	""

"안녕하세요"

"안녕하세요세계"

""

""

, innerText를 자신에게 할당하여 다음을 나타냅니다. 지정된 요소의 HTML 태그입니다. oDiv.innerText = oDiv.innerText;