innerText innerHTML 사용법 및 주의사항 [권장]_javascript 기술

1: 텍스트와 HTML을 동적으로 변경합니다

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>데모1</title> <style type="text/css"> p { color:gray; } </style> <p> </p> <p>아래 텍스트를 클릭해주세요... </p> <ul> <li id="DT" onclick="changeText()"> </li>잘 지내세요?<li id="DH" onclick="changeHtml()"> </li>당신의 성은 무엇입니까?<li onclick="back()"> </li>원래 상태로 복원</ul>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

innerText 속성은 출력할 텍스트를 정의하는 데 사용됩니다. 이 예에서 innerText는 개체 DT의 "How are you?" 텍스트를 "I'm Fine!"으로 변경합니다. 난 괜찮아!"). innerHTML 속성은 DH 객체를 변경하는 데 사용됩니다. innerText의 기능 외에도 DH 객체 내부의 HTML 문도 변경할 수 있으므로 텍스트를 "My last name is Xiao!"로 변경하고 텍스트 출력은 다음과 같습니다. 기울임꼴()로 변경하고 아래에 직선()을 추가합니다. 즉, DH.innerHTML="". 외부텍스트와 외부HTML도 비슷한 기능을 갖고 있으므로 독자들이 직접 시도해 볼 수도 있습니다.
2: 텍스트의 동적 입력 및 출력

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title>데모2<style type="text/css"> p { color:gray; } body { font-family:宋体; color:blue; font-size:9pt; } .blue { color:blue; font-size:9pt; } </style> <form id="frm"> <p> <input type="text" name="txt" size="50"> <input type="button" value="输出文本" class="blue" onclick="OutputText()"> 텍스트 상자에 텍스트를 입력하세요. </p> <p id="output"> </p> </form> 여기에 텍스트 출력:
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]
이 예의 효과는 먼저 텍스트 상자에 텍스트를 입력한 다음 "텍스트 출력" 버튼을 누르면 웹 페이지가 입력한 텍스트를 자동으로 출력하는 것입니다.
3: innerHTML에는 자동 자동으로 구문 검사 기능 HTML 코드가 완전히 완성되었습니다. 이는 마술적이라고 할 수 있습니다

예를 들어 다음 스크립트 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> 데모3 <p id="tab" onclick="Get()"> </p> 저를 클릭해주세요!!!

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

달리기의 효과는 다음과 같습니다:
그림과 같이:

그러므로 사용 시 주의하시기 바랍니다. 예를 들어 이러한 작업을 수행하면 오류가 발생합니다. 코드를 복사하세요. >

코드는 다음과 같습니다.


list.innerHTML="" list.innerHTML="

"
중간 변수를 사용해야 합니다
HTML 코드

코드 복사 코드는 다음과 같습니다

var html=""
html ="

" list.innerHTML=html; ;html ="

"; list.innerHTML=html; 이 방법으로 문제를 해결할 수 있습니다. 또한: innerText in Firefox에서는 지원되지 않습니다. innerHTML은 W3C 표준을 준수하는 속성이며 innerText는 IE 브라우저에만 적용 가능합니다. HTML 태그 없이 콘텐츠를 출력하려면 innerHTML을 사용하여 HTML 태그가 포함된 콘텐츠를 가져온 다음 정규식을 사용하여 HTML 태그를 제거할 수 있습니다. 다음은 W3C 표준을 준수하는 간단한 예입니다. a href="javascript :alert(document.getElementById('test').innerHTML.replace(/<. ?>/gim,''))">HTML 없음, W3C 표준 준수 성명： 본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요. 이전 기사：자바스크립트 캐스트형 변환 함수_javascript 스킬다음 기사：자바스크립트 캐스트형 변환 함수_javascript 스킬 관련 기사 더보기 Bootstrap 목록 그룹 구성 요소에 대한 심층 분석 JavaScript 함수 커링에 대한 자세한 설명 JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함) Angularjs는 WeChat UI(weui)를 통합합니다. JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술 공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！ 회사 소개부인 성명Sitemap © php.cn All rights reserved