.innerHTML을 피하도록 제안하는 이유는 무엇입니까?

죄송합니다. 자바 스크립트 멍청한 놈이 되십시오. 그러나 아무에게도 설명 할 수없는 이유는 무엇입니까? .innerHTML을 사용하지 않는 것이 좋습니다. 우리가 .innerHTML의 형태로 더 빠르고 쉬운 것을 가지고있을 때 왜 사용하지 않아야합니까?.innerHTML을 피하도록 제안하는 이유는 무엇입니까?

출처

2013-08-29 heretolearn

누가 사용하지 말라고 말합니까? 그리고 무엇보다 빠른 무엇입니까? – Steve

'innerHTML'은 DOM이 개념적으로 작동하는 방식이 아닌 직렬화 된 데이터의 최상위에서 작동합니다. HTML의 큰 덩어리를 수동으로 구축 할 때 무언가를 엉망으로 만드는 것은 상대적으로 쉽기 때문에 유지하기가 더 어렵습니다. 또한 JS 내부의 HTML은 많은 노련한 JS 개발자들에게는 눈에 띄지 않습니다. JS 파일의 절반이 자바 스크립트와 섞여있는 것을 보았을 때 똑같이 생각할 것입니다. 이것이 JS 템플릿 엔진과 Angular 프레임 워크가있는 이유입니다. 하지만 그렇습니다. 문제없이 기능적인면에서 JS 내부에 HTML을 넣을 수 있습니다 (@Evan이 응답하는 이전 IE를 사용하여 몇 가지 사례 저장). –

innerHTML은 슬레지 해머입니다. 선택한 DOM 요소의 내용을 제거하고 그 시점에 할당 된 내용으로 바꿉니다. 이로 인해 여러 가지 HTML 이스케이프 및 유효성 검사 문제가 발생합니다.

더 중요한 것은 많은 수의 이벤트가 바인드 된 페이지의 경우 innerHTML을 사용하여 다른 요소를 추가하면 DOM 요소가 재생성되므로 이벤트 바인딩이 손실 될 수 있음을 의미합니다.

DOM에서 요소가 제거되면 이전 버전의 IE에서 메모리 누수와 관련된 몇 가지 문제가 있습니다. 당신이 innerHTML를 사용하지한다고 말했다 모두와 함께

, 나는 당신을 말하고 있지 않다. $(selector).html()을 사용할 때 jQuery에서 항상 사용합니다. 때로는 해머 (sledgehammer)가 작업에 적합한 도구이며, 이벤트가 올바르게 위임되면 콘텐츠가 얼마나 많이로드되는지는 중요하지 않습니다.

출처

2013-08-29 04:36:39 zzzzBov

+1, 나는'element.innerHTML + = ...'을 시도한 사람들을 거의 잊어 버렸고, 그 요소의 자손들로부터 모든 이벤트 핸들러들/연관된 위젯들이 어떻게 파기되었는지를 알아 차렸다. –

IIRC Resig는 innerHtml의 성능 차이로 인해 여러 브라우저에서 해킹을하고 있습니다. 래퍼를 사용해야하는 이유가 더 있습니다. –

+1, 나는 쇠망 치는 비유를 좋아한다. innerHTML을 올바르게 사용하는 방법을 알고 있다면 교활한 작업을 할 필요가없는 한 많은 시간을 절약 할 수 있습니다. 망치처럼. – Steve

.innerHTML을 피하도록 제안하는 이유는 무엇입니까?

답변

관련 문제