jquery에서 innerHTML과 html()의 차이점은 무엇입니까?

차이점: 1. html()은 tbody 및 tr과 같은 읽기 전용 태그를 설정할 수 있지만 innerHTML은 IE의 하위 버전에서는 작동하지 않으며 값이 할당되면 스크립트에서 오류를 보고합니다. .html()로 설정된 스크립트가 실행됩니다. innerHTML로 설정된 스크립트는 실행되지 않습니다.

추천 튜토리얼: jquery 비디오 튜토리얼

InnerHtml()과 html( )

1의 차이점은 tbody 및 tr과 같은 읽기 전용 태그를 설정할 수 있습니다. while innerHTML IE

낮은 버전에서는 작동하지 않습니다. HTML 문서에서는 .html() 메서드를 사용하여 모든 요소의 내용을 가져올 수 있습니다. 선택기가 두 개 이상의 요소와 일치하는 경우 첫 번째로 일치하는 요소의 HTML 콘텐츠만 검색됩니다.

innerHTML은 Html 태그를 포함하여 개체의 시작 위치부터 끝 ​​위치까지의 전체 내용입니다.

저는 원래 innerHTML과 jquery의 html이 실제로 정확히 똑같고 jquery가 불필요하다고 생각했습니다. 문제

예를 보세요:

var tbody=document.createElement('tbody');
tbody.innerHTML=&#39;<tr><td>IE下tbody的innerHTML是只读的</td></tr>&#39;; //在IE下报错，目标对象错误

이제 jquery의 html을 사용해 보세요.

$(tbody).html(&#39;<tr><td>IE下tbody的innerHTML是只读的</td></tr>&#39;);

jquery가 IE에서 문제 없이 올바르게 표시되는 것을 발견했습니다.

정보를 확인한 후 다음을 발견했습니다.

jQuery의 html()이 일부 내결함성 처리를 수행했습니다. 테이블 tr 및 tbody 및 기타 요소와 같은 기본 Dom API innerHTML의 일부 요소는 지원되지 않습니다. IE에서는 tr은 읽기만 가능하고 쓰기는 불가능하지만 다른 브라우저에서는 문제가 없습니다.

jquery는 try 및 catch를 사용하여 오류가 보고되면 catch에서 this.empty().append(value)가 다시 호출됩니다. 문자열은 추가를 통해 추가됩니다.

IE의 일부 요소의 innerHTML은 읽기 전용입니다.

IE6, IE7, IE8, IE9에서는 col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, tr 이러한 innerHTML 속성은 읽기 전용이며 값을 할당할 수 없습니다. 값이 할당되면 스크립트에서 오류를 보고합니다. IE10에서는 이러한 태그의 innerHTML이 쓰기 가능하도록 변경되었습니다.

이러한 태그의 innerHTML 속성은 IE6-IE9에서 읽기 전용이므로 이러한 태그의 innerHTML 속성에 값을 할당하지 않으려고 노력합니다. 예를 들어 테이블의 innerHTML은 테이블의 innerHTML로 변경될 수 있습니다. 테이블 상위 요소(p로 가정) 속성 할당.

2. html()로 설정한 스크립트는 실행되지만, innerHTML로 설정한 스크립트는 실행되지 않습니다.

jQuery는 매개변수 문자열의 스크립트 태그를 강제로 적용하지만(생성 및 교체를 통해) .innerHTML 할당은 적용되지 않기 때문입니다.

$(&#39;#app&#39;).html(&#39;<script>alert(1)</script>&#39;)  // 会弹出警告框
$(&#39;#app&#39;)[0].innerHTML = &#39;<script>alert(1)</script>&#39; // 不会弹出警告框
      // ↑使用[0]将jquery对象转为dom对象，只有dom对象才有innerHTML方法，jQuery没有。

추가 정보:

html() 함수의 장점

innerHTML 속성의 단점을 살펴보면 jQuery에서 html() 함수의 장점을 알 수 있습니다. html5 태그를 지원하지 않습니다. href 및 src 속성이 변환되는 문제가 없으며 특정 태그가 html 문자열을 설정할 수 없는 문제도 없습니다. 간단히 말해서 적어도 한 문장에서는 모든 것이 걱정되지 않습니다. 기능 구현 측면에서.

html() 함수의 단점

jQuery의 html() 함수는 한없이 완벽해 보이지만 사실 완벽함은 그 기능만을 반영하는 것이 아닙니다. IE를 포함한 모든 브라우저와 호환됩니다. . 그러나 IE에서는 호환되지만 성능이 낙관적이지 않습니다. html() 함수를 사용하여 많은 양의 html 문자열을 설정하면 재앙이 됩니다.

IE에서 html() 함수의 성능은 얼마나 낮나요? 컴퓨터 구성은 "i5 쿼드코어, 8G 메모리, IE9" 입니다. html() 함수를 이용해서 2000행 4열의 테이블을 설정해서 테스트했는데 평균 소요시간은 27초였습니다! IE에서 html()이 그렇게 느린 구체적인 이유는 무엇입니까? 소스 코드를 간략히 읽었으며 관심 있는 학생들이 이를 깊이 있게 연구할 수 있는 주요 이유 중 하나라고 생각합니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 jquery에서 innerHTML과 html()의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!