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

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

yulia
yulia원래의
2018-09-14 17:25:361713검색

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

<div id="test">
   <span style="color:red">test1</span> test2
</div>

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

test.innerHTML:

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

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

test.innerText:

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

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

test.outerHTML:

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

 위의 예에서 text.outerHTML의 값은 024ec8e648c1f06980a2d32e6dcf0f0b0bbd5cc33b622ada7b9ba1b438e60276test154bdf357c58b8a65c66d7c19c8e4d114 test216b28748ea4df4d9c2150843fecfba68

전체 예:

<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 표준을 준수하는 간단한 예입니다.

9700aa31fc9e275a881c3f9bbd434b7b/gim,''))">HTML이 없으며 W3C 표준을 준수합니다5db79b134e9f6b82c0b36e0489ee08ed.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.