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 = “_<script defer>alert(‘hi’);<\/script>”;
div.innerHTML = “<div>&nbsp;</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

+ Recent posts