JavaScript_javascript 기술에서 innerHTML, innerText 및 externalHTML의 사용법과 차이점

더 이상 헛소리하지 마세요. 아래 예시를 참고하세요.

사용법:

<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 값도

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

전체 예:

<div id="test"> 
 <span style="color:red">test1</span> test2 
</div>
innerHTML内容
inerHTML内容
outerHTML内容

특별 지침:

InnerHTML은 W3C 표준을 준수하는 속성이지만 innerText는 IE 브라우저에만 적용 가능하므로 HTML 태그가 포함되지 않은 콘텐츠를 출력하려면 innerHTML을 최대한 적게 사용하면 됩니다. 태그 내용을 제거한 후 정규식을 사용하여 HTML 태그를 제거하려면 다음과 같은 간단한 예를 사용하십시오.

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+&#63;>/gim,''))">无HTML,符合W3C标准</a>

innerHTML과 innerText를 어떻게 구별하나요?

샘플 코드:

<div id="test"> 
<span style="color:red">test1</span> test2 
</div> 
<a 
href="javascript:alert(test.innerHTML)">innerHTML内容</a> 
<a 
href="javascript:alert(test.innerText)">inerHTML内容</a> 

공통점: innerHTML 및 innerText는 요소 내의 콘텐츠를 대체합니다.

차이점:

1, innerHTML:

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

위 예에서 test.innerHTML 값은 "0bbd5cc33b622ada7b9ba1b438e60276test154bdf357c58b8a65c66d7c19c8e4d114
test2”.

2, innerText:

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

위 예시에서 text.innerTest의 값은 "test1 test2"이며, 스팬 태그가 제거되었습니다.

innerHTML은 W3C 표준을 준수하는 속성인 반면 innerText는 IE 브라우저에만 적용 가능하므로 HTML 태그 없이 콘텐츠를 출력하려면 innerHTML을 최대한 사용하고, innerText를 적게 사용하세요. innerHTML을 사용하여 HTML 태그가 포함된 콘텐츠를 얻은 후 정규식을 사용하여 HTML 태그를 제거할 수 있습니다.

위 내용은 JavaScript에서 innerHTML, innerText, externalHTML의 사용법과 차이점에 대한 소개입니다.