> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 innerHTML, innerText 및 externalHTML의 차이점

JavaScript에서 innerHTML, innerText 및 externalHTML의 차이점

yulia
풀어 주다: 2018-09-14 17:25:36
원래의
1666명이 탐색했습니다.

최근 일부 JavaScript 지식을 요약하여 모든 사람과 공유했습니다. 이 글은 주로 JavaScript에서 innerHTML, innerText, OuterHTML의 사용법에 대해 설명합니다. 여기에는 특정 참조 값이 있습니다. 도움이 필요한 경우 도움이 되기를 바랍니다. 사용법:

<div id="test">
   <span style="color:red">test1</span> test2
</div>
로그인 후 복사

는 JS에서 사용할 수 있습니다:

test.innerHTML:

 즉, Html 태그를 포함하여 개체의 시작 위치부터 끝 ​​위치까지의 모든 것입니다.

 위 예시에서 test.innerHTML의 값은 "test1 test2 "입니다.

test.innerText:

  시작 위치부터 끝 ​​위치까지의 내용이지만 Html 태그가 제거되었습니다.

  위 예에서 text.innerTest의 값은 "test1 test2"이며, 여기서 스팬 태그는 다음과 같습니다. 제거됨.

test.outerHTML:

innerHTML의 전체 내용을 포함하는 것 외에도 객체 태그 자체도 포함합니다.

 위의 예에서 text.outerHTML의 값은

test1 test2

전체 예:

<div id="test">
   <span style="color:red">test1</span> test2
</div>
innerHTML内容
inerHTML内容
outerHTML内容
로그인 후 복사

특별 참고 사항:

innerHTML은 W3C 표준을 준수하는 속성이며 innerText는 IE 브라우저에만 적용 가능합니다. 따라서 HTML 태그 없이 콘텐츠를 출력하려면 innerHTML을 최대한 많이 사용하고 innerText를 적게 사용하세요. , innerHTML을 사용하여 HTML 태그가 포함된 콘텐츠를 가져온 다음 정규식을 사용하여 HTML 태그를 제거할 수 있습니다. 다음은 W3C 표준을 준수하는 간단한 예입니다.

HTML이 없으며 W3C 표준을 준수합니다.

위 내용은 JavaScript에서 innerHTML, innerText 및 externalHTML의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿