innerHTML Property
innerHTML 이 정확히 어떤 Text 를 반환할지는 Browser 에 따라 다르다.
IE 와 Opera 는 모든 태그를 대문자로 반환하며 Safari 와 Chrome, FireFox 는 공배과 들여쓰기를 포함해 HTML 을 문서 그대로 반환한다.
innerHTML 의 반화값이 모든 Browser 에서 정확히 같지는 않다.
innerHTML 을 쓰기모드로 사용하면 주어진 문자열을 DOM SubTree 로 파싱해 이미 존재하는 자식 노드를 모두 교체한다.
HTML 태그가 없는 단순한 텍스트는 평범한 텍스트가 된다.
innerHTML 의 제한
innerHTML 로 삽입된 <script> 요소는 대부분의 Browser 에서 실행되지 않는다.
IE 8 및 그 이전 버전은 이를 허용하지만 삽입하는 <script> 요소에 defer 속성이 있어야 하며 Microsoft 에서 'scoped element' 라고 부르는 요소 뒤에 있어야 한다.
<script> 요소는 'NoScope elements'인데 이는 <style>요소나 주석처럼 페이지에 나타나지 않는 요소를 말한다.
IE 에서는 innerHTML 로 삽입하는 문자열 처음 부분에서 스코프없는 요소를 모두 제거하므로 다음 코드는 작동하지 않는다.
div.innerHTML = “<script defer>alert(‘hi’);<\/script>”; //won’t work
위 구문에서 innerHTML 문자열은 NoScope element 로 시작하므로 전체 문자열이 사라진다.
이 스크립트가 적절히 동작하게 하려면 닫는 태그 없는 <input> 같은 요소나 텍스트 노드같은 scope element 뒤에 써야한다.
다음 구문은 동작한다.
div.innerHTML = “<div> </div><script defer>alert(‘hi’);<\/script>”;
div.innerHTML = “<input type=\”hidden\”><script defer>alert(‘hi’);<\/script>”;
모든 요소가 innerHTML 을 지원하지는 않는다.
특히나 다음의 element 는 innerHTML 을 지원하지 않는다.
<col><colgroup>, <frameset>, <head>, <html>, <style>, <table>, <tbody>, <thead>, <tfoot>, <tr>
IE8 및 이하버전은 <table> element 에서도 innerHTML 을 지원하지 않는다.
innerHTML 을 사용할 때는 항상 조심해야하며 가능하다면 삽입할 텍스트를 직접 점검해야한다.
innerHTML, outerHTML, insertAdjacentHTML 를 사용할 때는 제거할 요소의 이벤트 핸들러나 자바스크립트 객체 프로퍼티를 모두 제거해야한다.
innerHTML, outerHTML 에 값을 할당할때마다 HTML 파서가 사용되므로 innerHTML, outerHTML 사용을 가능한 줄이는 편이 더 낫다.
for (var i=0, len=values.length; i < len; i++){
ul.innerHTML += ”<li>” + values[i] + ”</li>”; //avoid!!
}
==>
var itemsHtml = “”;
for (var i=0, len=values.length; i < len; i++){
itemsHtml += ”<li>” + values[i] + ”</li>”;
}
ul.innerHTML = itemsHtml;
-- 도서 "JavaScript for Web Developers" 를 정리
행복한 고수되십시요.
woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript] SystemJS (0) | 2017.10.08 |
|---|---|
| [JavaScript] Interval, Timeout (0) | 2017.02.11 |
| [JavaScript] Pop Up 차단 확인 (0) | 2017.01.26 |
| [JavaScript] Browser 탐지 스크립트 (0) | 2017.01.26 |
| [JavaScript] Location 객체 (0) | 2017.01.25 |