javascript innerHTML, externalHTML, innerText 및 externalText_javascript 기술의 차이점
- WBOY원래의
- 2016-05-16 18:58:10984검색
1. 기능 설명:
innerHTML은 객체의 여는 태그와 닫는 태그 내에 있는 HTML을 설정하거나 가져옵니다.
externalHTML은 객체와 그 내용의 HTML 형식을 설정하거나 가져옵니다.
innerText는 개체의 시작 및 끝 태그 내에 있는 텍스트를 설정하거나 가져옵니다.
externalText는 객체의 텍스트를 설정(라벨 포함)하거나 가져옵니다(라벨 제외).
2. 예시
<html>
<head>
<title>Demo</title>
<style><!--
body {font-family:"宋体";color="blue";font-size="9pt"}
--> </style>
<script language="JavaScript">
//.innerHTML
function innerHTMLDemo()
{
test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>";
}
//.innerText
function innerTextDemo()
{
test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>";
}
//.outerHTML
function outerHTMLDemo()
{
test_id3.outerHTML="<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>";
}
//.outerText
function outerTextDemo()
{
test_id4.outerText="<i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";
}
</script>
</head>
<body>
<ul>
<li id="test_id1" onclick="innerHTMLDemo()">innerHTML效果.</li>
<li id="test_id2" onclick="innerTextDemo()">innerText效果.</li>
<li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li>
<li id="test_id4" onclick="outerTextDemo()">outerText效果.</li>
</ul>
</body>
</html>
3. 차이점:
간단히 말하면 innerHTML과 externalHTML, innerText와 externalText의 차이점은 다음과 같습니다.
1) innerHTML 및 externalHTML에 포함된 HTML은 객체의 콘텐츠를 설정할 때 구문 분석되지만 innerText 및 externalText는 구문 분석되지 않습니다.
2) 설정할 때 innerHTML과 innerText는 태그 내의 텍스트만 설정하고, innerHTML과 innerText는 태그를 포함한 텍스트를 설정합니다.
특별 지침:
innerHTML은 W3C 표준을 준수하는 속성으로 innerText는 IE 브라우저에만 적용 가능하므로 HTML 태그가 포함되지 않은 콘텐츠를 출력하려면 innerHTML을 사용하면 됩니다. 마지막으로 정규식을 사용하여 HTML 태그를 제거합니다. 다음은 W3C 표준을 준수하는 간단한 예입니다.
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.