IE의 DHTML 객체는 페이지 요소의 내용을 동적으로 조작하기 위해 읽기 및 쓰기 가능한 네 가지 속성(innerText, externalText, innerHTML, externalHTML)을 제공합니다.
두 가지 사항에 유의해야 합니다.
1. innerText 및 externalText 속성의 값은 일반 텍스트로 표시됩니다. HTML 태그가 포함되어 있더라도 사실대로 반영됩니다. 반면 innerHTML 및 externalHTML은 HTML 엔진에 의해 구문 분석된 텍스트를 제공하므로 속성에서 HTML 태그의 성능 효과를 반영할 수 있습니다.
2. 객체의 externalText 및 externalHTML 속성에 값을 할당하면(즉, 쓰기 작업) 객체가 삭제됩니다.
위 4가지 속성의 할당 작업은 원본 개체의 텍스트 내용만 대체합니다. 페이지에서 지정된 요소의 해당 위치에 새 텍스트 내용을 추가하려면 insertAdjacentHTML 및 insertAdjacentText 메서드를 사용해야 합니다. 형식은 다음과 같습니다:
object.insertAdjacentText(sWhere, sText)
object.insertAdjacentHTML(sWhere, sText)
beforeBegin, afterBegin, beforeEnd 및 afterEnd라는
4가지 사전 설정 값이 있습니다
.사용 시 다음 사항에 주의하세요
. 이 두 가지 방법은 전체 문서를 불러온 후에 사용해야 하며, 그렇지 않으면 오류가 발생합니다.
2. InsertAdjacentText는 일반 텍스트만 삽입할 수 있고, InsertAdjacentHTML은 html 형식의 텍스트를 삽입할 수 있습니다
. 3. InsertAdjacentHTML을 사용하여 스크립트를 삽입할 경우 스크립트 요소에 defer 속성을 사용해야 합니다. 그렇지 않으면 스크립트 실행 중 런타임 오류가 발생합니다
. 4. InsertAdjacentHTML이 html 요소를 삽입한 후에는 가능한 모든 요소 컬렉션이 자동으로 업데이트되어 동적 변경 사항을 반영합니다. 예를 들어 페이지에 있는 후속 요소의 sourceIndex 속성이 변경됩니다.
5. 이 방법을 사용하면 InsertHTML/outerHTML 속성을 잘못된 HTML 태그에 할당할 때 런타임 오류가 발생할 수 있습니다. 예를 들어, 다음 코드는 오류를 발생시킵니다:
또한 페이지 콘텐츠를 동적으로 운영하는 경우 다음 사항에 주의해야 합니다.
1. 위의 속성과 메소드에 의해 문서 BODY에 표시되는 내용만 동적으로 변경할 수 있습니다. BODY 객체의 내용은 동적으로 조작할 수 있지만 BODY 객체 자체는 교체할 수 없습니다.
2. 위의 속성과 메소드는 input 및 img와 같은 빈 태그(콘텐츠가 없는 html 태그)에서는 작동할 수 없습니다.
3． 테이블 객체의 경우 td(innerHTML/innerText) 및 테이블(outerHMTL/outerText) 객체만 특정 속성을 사용하여 콘텐츠를 바꾸거나 삽입할 수 있습니다. tr 및 tbody와 같은 다른 테이블 객체는 이러한 속성을 사용하여 콘텐츠를 변경할 수 없습니다.